/* Perch timeline + scene dialog — Daybreak theme */

/* ── Micro-animation keyframes ── */
@keyframes p-heart-pop {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.45); }
  60%  { transform: scale(0.88); }
  100% { transform: scale(1); }
}
@keyframes p-star-pop {
  0%   { transform: scale(1) rotate(0deg); }
  35%  { transform: scale(1.5) rotate(-12deg); }
  65%  { transform: scale(0.85) rotate(6deg); }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes p-cmt-slide-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes p-card-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes p-like-count-tick {
  0%   { transform: translateY(0); }
  40%  { transform: translateY(-4px); opacity: 0.4; }
  100% { transform: translateY(0); opacity: 1; }
}

.p-btn-heart-pop { animation: p-heart-pop 0.38s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; }
.p-btn-pop       { animation: p-star-pop 0.38s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; }
.p-cmt-new       { animation: p-cmt-slide-in 0.22s ease-out both; }
.p-card          { animation: p-card-in 0.18s ease-out both; }

/* ── Timeline shell ── */
#perch-timeline {
  min-height: 200px;
}

.p-empty {
  color: var(--muted);
  text-align: center;
  padding: 40px 20px;
  font-size: 14px;
}

/* Grid — track min controlled by --p-card-min (set by density buttons) */
.p-grid {
  display: grid;
  gap: 14px;
  padding: 4px 0 20px;
  grid-template-columns: repeat(auto-fill, minmax(var(--p-card-min, 280px), 1fr));
}

/* ── Scene card ── */
.p-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 13px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: border-color 0.20s ease, box-shadow 0.20s ease, transform 0.20s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
  content-visibility: auto;
  contain-intrinsic-size: auto 260px;
  font-family: var(--font-ui);
  outline: none;
  max-width: 100%;
}
.p-card:hover,
.p-card:focus-visible {
  border-color: rgba(45, 106, 53, 0.28);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.12);
  transform: translateY(-3px);
}

/* Delete button */
.p-card-delete-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(192, 48, 58, 0.45);
  background: rgba(255, 255, 255, 0.88);
  color: var(--like-red);
  font-size: 14px;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
}
.p-card:hover .p-card-delete-btn,
.p-card:focus-within .p-card-delete-btn {
  display: inline-flex;
}
.p-card-delete-btn:hover {
  background: var(--like-red-dim);
  color: var(--like-red);
}

/* ── Card thumbnail — full-bleed 16/9 with crop inset ── */
.p-card-thumb {
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
  background: #e8e0d4;
  width: 100%;
}

.p-thumb-main {
  width: 100%;
  height: 100%;
  position: relative;
}
.p-thumb-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.p-card:hover .p-thumb-main img {
  transform: scale(1.04);
}

/* Bird crop inset — bottom-right corner */
.p-bird-crop-inset {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 92px;
  height: 92px;
  border-radius: 9px;
  border: 2.5px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.22);
  overflow: hidden;
  pointer-events: none;
}
.p-bird-crop-inset img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Hide-crops mode */
#perch-timeline.hide-crops .p-bird-crop-inset {
  display: none;
}

/* ── Card body ── */
.p-card-body {
  padding: 8px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-ui);
}

/* Row 1: title + time */
.p-card-row1 {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.p-card-ttl {
  font-family: var(--font-serif);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 0;
}
.p-card-time {
  font-size: 9.5px;
  color: var(--muted-light);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  white-space: nowrap;
}

/* Row 2: chips + social */
.p-card-row2 {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* Species chips */
.p-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px;
}
.p-chip {
  display: inline-block;
  border: 1px solid var(--green);
  border-radius: 999px;
  font-size: 9px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--green);
  padding: 1px 7px;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.p-chip--with-sci {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  white-space: normal;
  padding: 2px 7px 3px;
  line-height: 1.15;
}
.p-chip-common {
  font-size: 9px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.p-chip-sci {
  font-size: 7.5px;
  font-style: italic;
  font-family: var(--font-serif);
  opacity: 0.72;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.p-chip-more {
  color: var(--muted);
  border-color: var(--border-mid);
}

/* Social row */
.p-social-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex-shrink: 0;
}
.p-card-cmt-count {
  font-size: 10px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
/* Static heart indicator. Gray when the scene has no likes, pink + count when
   one or more. Not a button — `pointer-events: none` keeps it out of the
   card-click target boundary so the whole-card click handler still fires
   cleanly when the user clicks near it. */
.p-card-likes {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--muted-light);
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.p-card-likes svg {
  display: block;
  flex: 0 0 auto;
  opacity: 0.6;
  transition: color 0.2s, opacity 0.2s;
}
.p-card-likes.has-likes {
  color: var(--like-red);
}
.p-card-likes.has-likes svg {
  opacity: 1;
}
.p-card-likes-n {
  font-size: 11px;
  font-weight: 600;
  color: inherit;
}

/* Legacy overlay badges (kept for backwards compat, hidden by default) */
.p-card-scene-likes,
.p-card-scene-comments {
  display: none;
}

/* Legacy thumb-row (keep for backwards compat — not rendered in new JS) */
.p-thumb-row { display: none; }
.p-thumb-bird { display: none; }
.p-thumb-empty { display: none; }

/* ── Timeline ── */
.p-timeline-body {
  position: relative;
  padding: 0 0 8px 0;
}

/* Day banner */
.p-day-banner {
  margin: 22px 0 14px 2px;
}
.p-day-banner-date {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.1;
}
.p-day-banner-sub {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 3px;
}
.p-day-banner-bar {
  height: 2px;
  width: 100px;
  background: linear-gradient(90deg, var(--green), transparent);
  border-radius: 999px;
  margin-top: 10px;
}

/* Time cluster */
.p-timeline-node {
  display: flex;
  gap: 0;
  position: relative;
  margin: 0;
}
.p-timeline-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 36px;
  flex: 0 0 36px;
  position: relative;
  padding-top: 8px;
}
.p-timeline-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  z-index: 1;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(45, 106, 53, 0.18);
  transition: transform 0.12s;
}
.p-timeline-line {
  width: 2px;
  flex: 1 1 auto;
  min-height: 20px;
  background: var(--border);
  margin: 2px 0 0 0;
}
.p-timeline-line.last {
  opacity: 0.35;
}
.p-untimed .p-timeline-dot {
  background: var(--muted-light);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}
.p-timeline-content {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 0 8px 10px;
}
.p-timeline-hdr {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  margin-bottom: 8px;
}
.p-timeline-time {
  color: var(--green);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.p-timeline-count {
  color: var(--muted-light);
  font-size: 11px;
}
.p-timeline-grid {
  margin-top: 0;
  grid-template-columns: repeat(auto-fill, minmax(var(--p-card-min, 280px), 1fr));
}

/* ── Timeline notes (photographer-authored prose) ── */
.p-timeline-note-node .p-timeline-rail {
  padding-top: 4px;
}
.p-timeline-pen {
  font-size: 14px;
  color: var(--muted-light);
  line-height: 1;
  z-index: 1;
  border: none;
  background: transparent;
  padding: 2px 4px;
  font-family: inherit;
}
.p-timeline-pen.is-clickable {
  cursor: pointer;
  border-radius: 4px;
  transition: color 0.12s, background 0.12s, transform 0.12s;
}
.p-timeline-pen.is-clickable:hover {
  color: var(--green);
  background: rgba(45, 106, 53, 0.08);
  transform: scale(1.15);
}
.p-timeline-pen.is-editing { color: var(--green); }
.p-timeline-note-content {
  padding: 2px 0 14px 10px;
  position: relative;
}
.p-timeline-note-body {
  font-family: var(--font-serif);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink);
  word-wrap: break-word;
}
.p-timeline-note-body > :first-child { margin-top: 0; }
.p-timeline-note-body > :last-child  { margin-bottom: 0; }
.p-timeline-note-body p { margin: 4px 0; }
.p-timeline-note-body h1,
.p-timeline-note-body h2,
.p-timeline-note-body h3,
.p-timeline-note-body h4,
.p-timeline-note-body h5,
.p-timeline-note-body h6 {
  font-family: var(--font-ui, var(--font-serif));
  font-weight: 700;
  margin: 10px 0 4px;
  line-height: 1.25;
  color: var(--ink);
}
.p-timeline-note-body h1 { font-size: 1.25rem; }
.p-timeline-note-body h2 { font-size: 1.15rem; }
.p-timeline-note-body h3 { font-size: 1.05rem; }
.p-timeline-note-body h4,
.p-timeline-note-body h5,
.p-timeline-note-body h6 { font-size: 1rem; }
.p-timeline-note-body ul,
.p-timeline-note-body ol {
  margin: 4px 0;
  padding-left: 22px;
}
.p-timeline-note-body li { margin: 2px 0; }
.p-timeline-note-body blockquote {
  margin: 6px 0;
  padding: 2px 0 2px 12px;
  border-left: 3px solid var(--border);
  color: var(--muted);
}
.p-timeline-note-body code {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.9em;
  background: rgba(0, 0, 0, 0.06);
  padding: 1px 5px;
  border-radius: 4px;
}
.p-timeline-note-body pre {
  margin: 6px 0;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 6px;
  overflow-x: auto;
  font-size: 12.5px;
  line-height: 1.45;
}
.p-timeline-note-body pre code {
  background: transparent;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
}
.p-timeline-note-body a {
  color: var(--green, #2d6a35);
  text-decoration: none;
  border-bottom: 1px solid rgba(45, 106, 53, 0.35);
}
.p-timeline-note-body a:hover { border-bottom-color: var(--green, #2d6a35); }
.p-timeline-note-body hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 10px 0;
}

/* ── Video notes ──────────────────────────────────────────────────────── */
/* Responsive 16:9 YouTube embed. iframe src is built from a constant origin +
   a validated 11-char video ID (see buildYouTubeEmbed in perch-view.js). */
.p-timeline-note-embed {
  position: relative;
  width: 100%;
  max-width: 640px;
  aspect-ratio: 16 / 9;
  margin: 2px 0 8px;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
}
.p-timeline-note-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Caption beneath a video reads quieter than a standalone prose note. */
.p-timeline-note-caption {
  font-size: 13.5px;
  color: var(--muted);
}

/* Editor: Note/Video mode toggle + the YouTube URL panel. */
.p-timeline-note-modes {
  display: flex;
  gap: 6px;
}
.p-timeline-mode-btn {
  font-family: var(--font-ui);
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel, var(--bg));
  color: var(--muted);
  cursor: pointer;
  line-height: 1.3;
}
.p-timeline-mode-btn:hover { border-color: var(--ink); }
.p-timeline-mode-btn.is-active {
  background: var(--green, #2d6a35);
  border-color: var(--green, #2d6a35);
  color: #fff;
}
.p-timeline-note-video-panel {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.p-timeline-note-video-url {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 13px;
}
.p-timeline-note-video-url:focus { outline: none; border-color: var(--green); }
.p-timeline-note-video-url.is-invalid { border-color: #c0392b; }
.p-timeline-note-video-preview img {
  width: 100%;
  max-width: 320px;
  border-radius: 6px;
  display: block;
}

.p-timeline-md-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0;
}
.p-timeline-md-btn {
  font-family: var(--font-ui);
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: var(--panel, var(--bg));
  color: var(--ink);
  cursor: pointer;
  line-height: 1.3;
}
.p-timeline-md-btn:hover {
  background: var(--bg);
  border-color: var(--ink);
}
.p-timeline-md-btn:active { transform: translateY(1px); }

.p-timeline-note-editor {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.p-timeline-note-textarea {
  width: 100%;
  min-height: 72px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.55;
  resize: vertical;
}
.p-timeline-note-textarea:focus { outline: none; border-color: var(--green); }
.p-timeline-note-editor-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.p-timeline-note-hint {
  flex: 1 1 auto;
  font-size: 11px;
  color: var(--muted-light);
  font-family: var(--font-ui);
}
.p-timeline-note-cancel,
.p-timeline-note-save,
.p-timeline-note-editor .p-timeline-note-delete {
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-family: var(--font-ui);
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--border);
  position: static;
  display: inline-block;
}
.p-timeline-note-cancel { background: transparent; color: var(--muted); }
.p-timeline-note-cancel:hover { color: var(--ink); background: rgba(0,0,0,0.04); }
.p-timeline-note-save { background: var(--green); color: white; border-color: var(--green); }
.p-timeline-note-save:hover { background: #245529; }
.p-timeline-note-save:disabled { opacity: 0.6; cursor: default; }
.p-timeline-note-editor .p-timeline-note-delete {
  background: transparent;
  color: var(--like-red, #c0303a);
  border-color: rgba(192,48,58,0.35);
}
.p-timeline-note-editor .p-timeline-note-delete:hover {
  background: rgba(192,48,58,0.08);
  border-color: var(--like-red, #c0303a);
}
.p-timeline-note-editor .p-timeline-note-delete:disabled { opacity: 0.6; cursor: default; }

/* Click-to-add affordance on the timeline dot. */
.p-timeline-dot.is-clickable {
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.15s;
}
.p-timeline-dot.is-clickable:hover {
  transform: scale(1.18);
  box-shadow: 0 0 0 5px rgba(45, 106, 53, 0.22);
}

/* "+ Add note at start" — a small button at the top of the timeline; ad-hoc
   editor slots inserted after a dot click. Neither shifts the timeline below. */
.p-timeline-add-note {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 0 0 8px 36px;
}
.p-timeline-add-note--adhoc {
  margin-top: 6px;
  margin-bottom: 6px;
}
.p-timeline-add-note--tail {
  margin-top: 4px;
  margin-bottom: 0;
}
.p-timeline-add-note-btn {
  border: 1px dashed var(--border);
  background: var(--panel);
  color: var(--muted);
  padding: 4px 10px;
  border-radius: 14px;
  font-size: 11px;
  font-family: var(--font-ui);
  cursor: pointer;
  opacity: 0.65;
  transition: opacity 0.15s, color 0.15s, border-color 0.15s;
}
.p-timeline-add-note-btn:hover {
  opacity: 1;
  color: var(--green);
  border-color: var(--green);
}
.p-timeline-add-note.is-editing .p-timeline-add-note-btn { display: none; }
.p-timeline-add-note.is-editing .p-timeline-note-editor {
  flex: 1 1 auto;
}

/* Between-row hover affordance: a thin idle band that expands and reveals the
   "+ Add note here" pill on hover. Persists in the DOM (unlike adhoc slots). */
.p-timeline-add-note--row-gap {
  margin: 0 0 0 36px;
  min-height: 6px;
  transition: min-height 0.15s ease;
}
.p-timeline-add-note--row-gap .p-timeline-add-note-btn {
  opacity: 0;
  transition: opacity 0.15s ease, color 0.15s, border-color 0.15s;
}
.p-timeline-add-note--row-gap:hover,
.p-timeline-add-note--row-gap:focus-within {
  min-height: 28px;
}
.p-timeline-add-note--row-gap:hover .p-timeline-add-note-btn,
.p-timeline-add-note--row-gap:focus-within .p-timeline-add-note-btn {
  opacity: 0.85;
}
.p-timeline-add-note--row-gap.is-editing { min-height: 0; }

/* Between-card pen affordance: revealed on card hover, sits centered in the
   14px grid gutter to the right of a non-last scene card. The wrapper provides
   a positioning context with overflow:visible (the card itself clips its
   thumbnail content). */
.p-card-wrap {
  position: relative;
  display: block;
  min-width: 0;
}
.p-card-add-note-btn {
  position: absolute;
  right: -11px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--muted);
  font-size: 12px;
  line-height: 1;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  padding: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  transition: color 0.15s, border-color 0.15s, background 0.15s, transform 0.12s;
}
.p-card-wrap:hover .p-card-add-note-btn,
.p-card-wrap:focus-within .p-card-add-note-btn {
  display: inline-flex;
}
.p-card-add-note-btn:hover {
  color: var(--green);
  border-color: var(--green);
  background: var(--panel);
  transform: translateY(-50%) scale(1.08);
}

/* ── Pinned filter bar ── */
.p-filter-bar {
  position: sticky;
  top: 54px;
  z-index: 100;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  padding: 9px 26px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 -26px 16px;
  font-family: var(--font-ui);
  min-height: 46px;
}

/* Search wrapper */
.p-filter-search-wrap {
  position: relative;
  flex: 1 1 180px;
  min-width: 0;
  display: flex;
  align-items: center;
}
.p-filter-search-icon {
  position: absolute;
  left: 9px;
  color: var(--muted-light);
  font-size: 12px;
  pointer-events: none;
  line-height: 1;
}
.p-filter-search {
  width: 100%;
  height: 32px;
  padding: 0 10px 0 28px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--ink);
  font-size: 12.5px;
  font-family: var(--font-ui);
  outline: none;
  transition: border-color 0.15s;
}
.p-filter-search::placeholder { color: var(--muted-light); }
.p-filter-search:focus {
  border-color: rgba(45, 106, 53, 0.40);
  background: #fff;
}

/* Sort pills */
.p-sort-pills {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.p-sort-pill {
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  font-family: var(--font-ui);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
}
.p-sort-pill:hover {
  border-color: rgba(45, 106, 53, 0.25);
  color: var(--green);
}
.p-sort-pill.active {
  border: 1px solid var(--green);
  background: var(--green-dim);
  color: var(--green);
}

/* Filter checkboxes */
.p-filter-check {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}
.p-filter-check input[type="checkbox"] {
  accent-color: var(--green);
}
.p-filter-check:hover { color: var(--ink); }

.p-filter-divider {
  width: 1px;
  height: 18px;
  background: var(--border-mid);
  flex-shrink: 0;
}
.p-filter-status {
  font-size: 11px;
  color: var(--muted-light);
  white-space: nowrap;
  font-family: var(--font-ui);
  margin-left: auto;
}

@media (max-width: 900px) {
  .p-filter-bar { margin: 0 -16px 12px; padding: 7px 16px; top: 54px; flex-wrap: wrap; }
  .p-filter-search { flex: 1 1 140px; }
  .p-filter-status { display: none; }
}

/* ── Loved-by banner (replaces the old photographer's-favorites picks bar) ── */
.p-lovedby-banner {
  background: var(--like-red-dim);
  border-bottom: 1px solid rgba(192, 48, 58, 0.16);
  font-family: var(--font-ui);
  padding: 10px 26px 12px;
}
.p-lovedby-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(192, 48, 58, 0.30) transparent;
  padding-bottom: 6px;
  margin-bottom: 10px;
}
/* Leading "♥ Loved by" label so the strip is self-explanatory. */
.p-lovedby-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  padding-right: 4px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--like-red, #c0303a);
}
.p-lovedby-label svg { flex-shrink: 0; }
.p-lovedby-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px 5px 5px;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.16s, border-color 0.16s, color 0.16s;
}
.p-lovedby-tab:hover {
  border-color: var(--border-mid);
  color: var(--ink);
}
.p-lovedby-tab[data-active="true"] {
  background: rgba(192, 48, 58, 0.10);
  border-color: rgba(192, 48, 58, 0.40);
  color: var(--like-red);
  font-weight: 600;
}
.p-lovedby-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--panel);
}
.p-lovedby-avatar--initials {
  background: rgba(192, 48, 58, 0.16);
  color: var(--like-red);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.p-lovedby-tab-name { line-height: 1; }
.p-lovedby-tab-count {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: inherit;
  opacity: 0.85;
  margin-left: 2px;
}

.p-lovedby-strip-wrap { overflow: hidden; }
.p-lovedby-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(192, 48, 58, 0.28) transparent;
  padding-bottom: 4px;
}
.p-loved-card {
  width: 172px;
  flex-shrink: 0;
  border-radius: 11px;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid rgba(192, 48, 58, 0.20);
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.p-loved-card:hover {
  border-color: rgba(192, 48, 58, 0.50);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
}
.p-loved-card-photo {
  width: 100%;
  height: 110px;
  overflow: hidden;
  position: relative;
  background: #e8e0d4;
}
.p-loved-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.p-loved-card-body {
  padding: 6px 9px 7px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.p-loved-card-title {
  font-family: var(--font-serif);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.p-loved-card-likes {
  font-size: 11px;
  font-weight: 700;
  color: var(--like-red);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

/* ── Inline editing ── */
.p-sb-title-input {
  background: rgba(45, 106, 53, 0.05);
  border: 1px solid rgba(45, 106, 53, 0.35);
  border-radius: 6px;
  color: var(--ink);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.2;
  width: 100%;
  box-sizing: border-box;
  padding: 2px 6px;
  font-family: var(--font-serif);
  outline: none;
  margin-bottom: 8px;
}
.p-sb-desc-input {
  background: rgba(45, 106, 53, 0.05);
  border: 1px solid rgba(45, 106, 53, 0.35);
  border-radius: 6px;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.65;
  width: 100%;
  box-sizing: border-box;
  padding: 4px 6px;
  font-family: var(--font-ui);
  resize: vertical;
  min-height: 48px;
  outline: none;
}
.p-sb-edit-hint {
  font-size: 10px;
  color: var(--muted-light);
  margin-top: 2px;
  font-family: var(--font-ui);
}

/* ── Shared with section ── */
.p-sb-shared-with { margin-top: 4px; }
.p-sb-shared-user {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 12px;
  color: var(--muted);
}
.p-sb-shared-user-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--green-dim);
}
.p-sb-shared-revoke {
  margin-left: auto;
  font-size: 10px;
  color: var(--like-red);
  cursor: pointer;
  opacity: 0.7;
  background: none;
  border: none;
  padding: 0 2px;
}
.p-sb-shared-revoke:hover { opacity: 1; }

/* ── Scene selection mode ── */
#perch-timeline.p-selection-mode .p-card {
  cursor: pointer;
  transition: opacity 0.2s, outline 0.1s;
}
#perch-timeline.p-selection-mode .p-card:hover {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}
.p-card.p-scene-excluded {
  opacity: 0.42;
  filter: grayscale(0.6);
  position: relative;
}
.p-card.p-scene-excluded::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    rgba(0, 0, 0, 0.06) 0px, rgba(0, 0, 0, 0.06) 1px,
    transparent 1px, transparent 8px
  );
  pointer-events: none;
  border-radius: inherit;
}

/* ── Scene selection bottom bar ── */
.p-select-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: var(--panel);
  border-top: 1px solid var(--border);
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-ui);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
}
.p-select-bar-count {
  font-size: 13px;
  color: var(--ink);
  flex: 1;
}
.p-select-bar .btn-sm {
  padding: 6px 12px;
  font-size: 12px;
  border-radius: 6px;
  border: 1px solid var(--border-mid);
  background: var(--bg);
  color: var(--muted);
  cursor: pointer;
  font-family: var(--font-ui);
}
.p-select-bar .btn-sm:hover { background: rgba(0, 0, 0, 0.04); }
.p-select-bar .btn-primary {
  background: var(--green);
  color: white;
  padding: 8px 18px;
  border-radius: 6px;
  border: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-ui);
}
.p-select-bar .btn-primary:hover { background: #245529; }
.p-select-bar .btn-secondary {
  background: var(--bg);
  color: var(--muted);
  padding: 8px 18px;
  border-radius: 6px;
  border: 1px solid var(--border-mid);
  font-size: 13px;
  cursor: pointer;
  font-family: var(--font-ui);
}


/* ─────────────────────────────────────────────────────────
   Edit Mode
   ───────────────────────────────────────────────────────── */

/* Scene card: allow absolute overlay children */
.perch-edit-mode .p-card {
  position: relative;
  cursor: default;
}

/* Per-scene overlay controls */
.scene-edit-overlay {
  display: none;
  position: absolute;
  top: 6px;
  right: 6px;
  gap: 4px;
  z-index: 10;
}
.perch-edit-mode .scene-edit-overlay {
  display: flex;
}
.scene-edit-btn {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  border: 1px solid var(--border-mid);
  background: var(--panel);
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.12s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.scene-edit-btn svg { display: block; }
.scene-edit-btn:hover {
  background: var(--panel);
  transform: translateY(-1px);
}

/* Hide/show toggle — neutral grey (visible state), brighter on hover */
.scene-edit-btn--hide:hover {
  color: var(--ink);
  border-color: var(--border);
}
/* Hidden state — amber/filled so the toggle clearly reads as "off". */
.scene-edit-btn--hide.is-hidden {
  color: #fff;
  background: var(--amber, #c98a1a);
  border-color: var(--amber, #c98a1a);
}
.scene-edit-btn--hide.is-hidden:hover {
  color: #fff;
  background: #b87a12;
  border-color: #b87a12;
}

/* Hidden scene state — dim only the thumbnail so the badge + toggle stay crisp. */
.perch-edit-mode .p-card--em-hidden .p-card-thumb {
  opacity: 0.3;
}

/* "Hidden" pill — only shown when the card is flagged hidden in edit mode. */
.scene-hidden-badge {
  display: none;
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 11;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--amber, #c98a1a);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-family: var(--font-ui);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.perch-edit-mode .p-card--em-hidden .scene-hidden-badge {
  display: block;
}

/* Edit mode input fields for title/description */
.edit-mode-field {
  transition: border-color 0.12s;
}
.edit-mode-field:focus {
  border-color: var(--green) !important;
  outline: none;
}

/* Sticky bottom save/cancel bar */
.edit-mode-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--panel);
  border-top: 1px solid var(--border-mid);
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.2);
  font-family: var(--font-ui);
}
.edit-mode-bar-label {
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
}
.edit-mode-bar-actions {
  display: flex;
  gap: 8px;
}

/* Legacy density toggle (p-density-btn referenced in JS) */
.p-density-btn {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-family: var(--font-ui);
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.p-density-btn.active,
.p-density-btn[aria-pressed="true"] {
  border-color: var(--green);
  background: var(--green-dim);
  color: var(--green);
}

/* ── Action button two-tier layout (owner sidebar) ── */
.p-sb-action-primary {
  display: flex;
  gap: 6px;
}
.p-sb-action-primary .btn {
  flex: 1;
}
.p-sb-copy-link-btn {
  width: 100%;
}
.p-sb-action-secondary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 2px;
}
.p-sb-back-link {
  font-size: 12px;
  color: var(--muted);
  text-decoration: none;
  font-family: var(--font-ui);
}
.p-sb-back-link:hover { color: var(--ink); }
.p-sb-delete-btn {
  font-size: 11px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  padding: 0;
  font-family: var(--font-ui);
}
.p-sb-delete-btn:hover { color: var(--like-red); }

/* ── Sidebar reflow for top-back / pinned-bottom-stats layout ── */
#p-sidebar-body {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.p-sb-flex-spacer { flex: 1 1 auto; }

.p-sb-back-row {
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
}
.p-sb-back-row .p-sb-back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
  text-decoration: none;
  font-family: var(--font-ui);
}
.p-sb-back-row .p-sb-back-link:hover { color: var(--ink); }

.p-sb-edit-btn {
  width: 100%;
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.p-sb-setup-btn {
  width: 100%;
  margin-top: 14px;
}

/* ── Share section ── */
.p-sb-share-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  margin-bottom: 12px;
  color: var(--ink);
  font-family: var(--font-ui);
  flex-wrap: wrap;
}
.p-sb-share-status .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.p-sb-share-status.private    .dot { background: var(--muted-light); }
.p-sb-share-status.unlisted   .dot { background: var(--sky); }
.p-sb-share-status.restricted .dot { background: #8e6bd1; }
.p-sb-share-status.public     .dot { background: var(--green); }
.p-sb-share-status.draft      .dot { background: var(--orange); }
.p-sb-share-status strong { font-weight: 600; }
.p-sb-share-status-meta {
  color: var(--muted);
  font-size: 11px;
}

.p-sb-share-link {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
}
.p-sb-share-link-input {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 11px;
  padding: 5px 8px;
  border: 1px solid var(--border-mid);
  border-radius: 6px;
  background: var(--bg);
  color: var(--muted);
  font-family: var(--font-ui);
  outline: none;
}
.p-sb-share-link-input:focus {
  border-color: rgba(45, 106, 53, 0.4);
  color: var(--ink);
}
.p-sb-share-copy-btn {
  font-size: 11px;
  padding: 5px 10px;
  border: 1px solid var(--border-mid);
  border-radius: 6px;
  background: var(--bg);
  color: var(--muted);
  cursor: pointer;
  font-family: var(--font-ui);
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.p-sb-share-copy-btn:hover,
.p-sb-share-copy-btn.copied {
  background: var(--green-dim);
  border-color: rgba(45, 106, 53, 0.3);
  color: var(--green);
}

.p-sb-share-action-btn { width: 100%; }

/* ── Bottom-pinned delete row ── */
.p-sb-delete-row {
  padding: 10px 18px 16px;
  border-top: 1px solid var(--border);
  text-align: center;
}
.p-sb-delete-bottom-btn {
  font-size: 11px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted-light);
  padding: 0;
  font-family: var(--font-ui);
}
.p-sb-delete-bottom-btn:hover { color: var(--like-red); }

/* ── "Sort by:" label + view-menu popover (in filter bar) ── */
.p-sort-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.p-sort-label {
  font-size: 11px;
  color: var(--muted);
  font-family: var(--font-ui);
  white-space: nowrap;
}

.p-view-menu {
  position: relative;
  flex-shrink: 0;
}
.p-view-menu-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border-mid);
  border-radius: 7px;
  background: var(--bg);
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.p-view-menu-btn:hover,
.p-view-menu-btn[aria-expanded="true"] {
  background: var(--green-dim);
  border-color: rgba(45, 106, 53, 0.3);
  color: var(--green);
}
.p-view-menu-popover {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
  padding: 12px 14px;
  z-index: 50;
  min-width: 220px;
}
.p-view-menu-popover[hidden] { display: none; }
.p-view-menu-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.p-view-menu-popover .p-sb-check { margin-bottom: 0; }


/* ═══════════════════════════════════════════════════════════════════════
   Scene Dialog — v3 design
   (see Perch Website/.claude/handoff_unzipped/design_handoff_scene_viewer/)
   ───────────────────────────────────────────────────────────────────────
   Scoped dark theme overrides ONLY inside #perch-scene-dlg. The rest of
   Perch (light-theme timeline + sidebar) is untouched. Classnames use the
   sv3- prefix so we never collide with the light-theme p-* utilities.
   ═══════════════════════════════════════════════════════════════════════ */

#perch-scene-dlg {
  /* Surfaces */
  --bg:          #0d0d0b;
  --panel:       rgba(22, 21, 18, 0.50);
  --card:        rgba(28, 27, 24, 0.25);

  /* Text */
  --ink:         #f1ede5;
  --ink-dim:     rgba(241, 237, 229, 0.74);
  --muted:       rgba(241, 237, 229, 0.54);
  --muted-low:   rgba(241, 237, 229, 0.36);

  /* Borders */
  --border:      rgba(255, 255, 255, 0.08);
  --border-mid:  rgba(255, 255, 255, 0.14);
  --border-hi:   rgba(255, 255, 255, 0.22);

  /* Accents */
  --orange:      #e3863f;
  --orange-dim:  rgba(227, 134, 63, 0.14);
  --green:       #7bb37d;
  --green-dim:   rgba(123, 179, 125, 0.14);
  --sky:         #79a8d8;
  --sky-dim:     rgba(121, 168, 216, 0.14);
  --red:         #d96a73;
  --red-dim:     rgba(217, 106, 115, 0.14);

  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  z-index: 20000;
  box-shadow: none;
}
#perch-scene-dlg::backdrop {
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(6px);
}

/* ── Favorites / "Loved by" viewer accent ────────────────────────────────
   A soft rose frame marks the liker's-favorites mode apart from a normal
   timeline scene. data-context="likes" is set by createSceneDialog whenever
   it opens a __likesContext synthetic scene; inset box-shadow keeps it a pure
   visual frame (no layout shift on the fullscreen dialog). The hue matches the
   loved-by heart accent (--like-red) but lightened toward pink. */
#perch-scene-dlg[data-context="likes"] {
  box-shadow:
    inset 0 0 0 2px rgba(217, 106, 115, 0.85),
    inset 0 0 52px rgba(217, 106, 115, 0.12);
}
#perch-scene-dlg[data-context="likes"]::backdrop {
  background: rgba(24, 6, 10, 0.74);
}

/* Lock the background page's scroll while the dialog is open so the page's
   scrollbar doesn't peek out at the right edge of the modal. The class is
   toggled by createSceneDialog's open/close handlers. */
html.sv3-dialog-open,
body.sv3-dialog-open {
  overflow: hidden !important;
}

/* ── Open animation ──────────────────────────────────────────────────── */
@keyframes sv3-dlg-open {
  from { opacity: 0; transform: scale(0.97) translateY(6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
#perch-scene-dlg[open] {
  animation: sv3-dlg-open 0.22s cubic-bezier(0.32, 0.72, 0.21, 1) both;
}

@keyframes sv3-focus-promote {
  0%   { opacity: 0; transform: scale(0.96) translateY(4px); }
  100% { opacity: 1; transform: scale(1)    translateY(0); }
}

/* ════════════════════════════════════════════════════════════════════════
   ENGINE-DRIVEN LAYOUT (scene-layout-engine.js)
   The scene viewer's geometry is owned by chooseLayout(): it returns px rects
   for the 4 panels (image / crops / filmstrip / comments) within the CONTENT
   AREA below the header. scene-dialog.js relayout() positions each panel
   absolutely at its inset rect (top offset by the measured header height) and
   stamps [data-layout] = phone|tablet|desktop on the dialog. The header is a
   real top bar at its natural height; the 4 panels are absolutely positioned
   siblings inside .sv3-inner. .sv3-body / .sv3-bottom-band collapse to
   display:contents so their 4 children hoist into .sv3-inner.
   ════════════════════════════════════════════════════════════════════════ */
#perch-scene-dlg .sv3-inner {
  position: relative;            /* containing block for the absolute panels */
  width: 100%;
  height: 100%;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 35%, rgba(227, 134, 63, 0.04), transparent 55%),
    radial-gradient(ellipse at 80% 80%, rgba(121, 168, 216, 0.03), transparent 60%),
    var(--bg);
}
/* The 4 engine panels are absolutely positioned at their inline rects. */
#perch-scene-dlg .sv3-image-cell,
#perch-scene-dlg .sv3-crops-panel,
#perch-scene-dlg .sv3-filmstrip-wrap,
#perch-scene-dlg .sv3-comments {
  position: absolute;
  margin: 0;
}

/* ── Header (absolute top bar at its natural height) ──────────────────── */
#perch-scene-dlg .sv3-header {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(8px);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 8;
}
/* ── Progressive header disclosure (per scene-4panel-layout-spec.md) ──────
   In production the dialog fills the real viewport, so width-based disclosure
   is plain CSS — robust against the JS that rebuilds the like button / tags /
   header on every render (a toggled class would be wiped). Order of sacrifice:
   brand <1024 · share-label <900 · capture <760 · family <600. The phone class
   (commentsFloat) drops all of those + the position string + the Like label,
   even when the phone is in landscape (wide but phone-class). Species tag,
   like/share icons, and close are never hidden. */
@media (max-width: 1023.5px) { #perch-scene-dlg .sv3-brand { display: none; } }
@media (max-width: 899.5px)  { #perch-scene-dlg .sv3-share-btn .sv3-act-label { display: none; } }
@media (max-width: 759.5px)  {
  #perch-scene-dlg .sv3-capture-time,
  #perch-scene-dlg .sv3-meta-sep[data-sep="capture"] { display: none; }
}
@media (max-width: 599.5px)  { #perch-scene-dlg .sv3-tag--family { display: none; } }
#perch-scene-dlg[data-layout="phone"] .sv3-brand,
#perch-scene-dlg[data-layout="phone"] .sv3-share-btn .sv3-act-label,
#perch-scene-dlg[data-layout="phone"] .sv3-like-btn .sv3-act-label,
#perch-scene-dlg[data-layout="phone"] .sv3-tag--family,
#perch-scene-dlg[data-layout="phone"] .sv3-position,
#perch-scene-dlg[data-layout="phone"] .sv3-capture-time,
#perch-scene-dlg[data-layout="phone"] .sv3-meta-sep[data-sep="capture"] { display: none; }
#perch-scene-dlg .sv3-identity {
  min-width: 0;
  flex: 0 1 auto;
}
#perch-scene-dlg .sv3-meta-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 3px;
  flex-wrap: wrap;
}
#perch-scene-dlg .sv3-perch-name {
  color: var(--ink);
  font-weight: 600;
}
#perch-scene-dlg .sv3-perch-name[hidden] { display: none; }
#perch-scene-dlg .sv3-by-photog { font-style: italic; }
#perch-scene-dlg .sv3-by-photog[hidden] { display: none; }
#perch-scene-dlg .sv3-capture-time { font-variant-numeric: tabular-nums; }
#perch-scene-dlg .sv3-capture-time[hidden] { display: none; }
#perch-scene-dlg .sv3-meta-sep {
  color: var(--muted-low);
}
#perch-scene-dlg .sv3-meta-sep[hidden] { display: none; }
#perch-scene-dlg .sv3-source-perch[hidden] { display: none; }
#perch-scene-dlg .sv3-source-link {
  color: var(--green);
  text-decoration: none;
}
#perch-scene-dlg .sv3-source-link:hover { text-decoration: underline; }

#perch-scene-dlg .sv3-title-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
#perch-scene-dlg .sv3-title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.1;
}
#perch-scene-dlg .sv3-position {
  font-size: 11px;
  color: var(--muted-low);
  font-variant-numeric: tabular-nums;
}

#perch-scene-dlg .sv3-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex: 1 1 auto;
  min-width: 0;
}
#perch-scene-dlg .sv3-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  padding: 4px 10px 5px;
  border-radius: 999px;
  color: var(--orange);
  line-height: 1.15;
}
#perch-scene-dlg .sv3-tag--species {
  background: var(--orange-dim);
  border: 1px solid rgba(227, 134, 63, 0.25);
}
#perch-scene-dlg .sv3-tag--family {
  background: transparent;
  border: 1px solid rgba(227, 134, 63, 0.40);
}
#perch-scene-dlg .sv3-tag-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--orange);
  opacity: 0.9;
  flex-shrink: 0;
}
#perch-scene-dlg .sv3-tag-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  line-height: 1.15;
}
#perch-scene-dlg .sv3-tag-common {
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-ui);
}
#perch-scene-dlg .sv3-tag-sci {
  font-size: 9.5px;
  font-style: italic;
  font-family: var(--font-serif);
  color: var(--orange);
  opacity: 0.72;
  letter-spacing: 0.01em;
  margin-top: 1px;
}

#perch-scene-dlg .sv3-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
  position: relative;
}
/* "Perch by Project Kestrel" branding — serif, muted, sits left of the action bar */
#perch-scene-dlg .sv3-brand {
  font-family: var(--font-serif);
  font-size: 11.5px;
  color: var(--muted-low);
  letter-spacing: 0.01em;
  white-space: nowrap;
  user-select: none;
  font-weight: 500;
}
#perch-scene-dlg .sv3-brand em {
  font-style: italic;
  opacity: 0.85;
  font-weight: 400;
}

/* Unified action bar: like / favorite / share in a single visual container,
   separated by hairline dividers instead of individual borders. */
#perch-scene-dlg .sv3-action-bar {
  display: inline-flex;
  align-items: stretch;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 2px;
  gap: 2px;
}
#perch-scene-dlg .sv3-act {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background: transparent;
  color: var(--muted);
  border: 0;
  border-radius: 9px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: background 0.18s, color 0.18s;
  line-height: 1;
}
#perch-scene-dlg .sv3-act[hidden] { display: none; }
#perch-scene-dlg .sv3-act:hover { background: rgba(255, 255, 255, 0.05); color: var(--ink-dim); }
#perch-scene-dlg .sv3-act[disabled] { cursor: default; opacity: 0.55; }
#perch-scene-dlg .sv3-act:disabled:hover { background: transparent; color: var(--muted); }
#perch-scene-dlg .sv3-act-icon { display: inline-flex; align-items: center; }
#perch-scene-dlg .sv3-act-icon svg { display: block; }
#perch-scene-dlg .sv3-act-label { line-height: 1; }
#perch-scene-dlg .sv3-act-sep {
  display: inline-block;
  width: 1px;
  align-self: center;
  height: 18px;
  background: var(--border);
  flex: 0 0 auto;
}
#perch-scene-dlg .sv3-act-sep[hidden] { display: none; }

/* Like — red when active */
#perch-scene-dlg .sv3-like-btn[data-active="true"] {
  color: var(--red);
  background: var(--red-dim);
}
/* Share — brief green flash on copy */
#perch-scene-dlg .sv3-share-btn[data-flash="true"] {
  color: var(--green);
  background: var(--green-dim);
}

/* Close button — standalone, smaller, no container */
#perch-scene-dlg .sv3-close-btn {
  width: 30px;
  height: 30px;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
  flex: 0 0 auto;
}
#perch-scene-dlg .sv3-close-btn:hover {
  color: var(--ink);
  border-color: var(--border-mid);
}

/* Share toast — slides in below the action bar; auto-dismissed by JS. */
#perch-scene-dlg .sv3-share-toast {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  max-width: 380px;
  padding: 9px 13px;
  background: rgba(20, 20, 18, 0.96);
  color: var(--ink-dim);
  border: 1px solid var(--border-mid);
  border-radius: 9px;
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1.45;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.22s ease, transform 0.22s ease;
  z-index: 5;
  pointer-events: none;
}
#perch-scene-dlg .sv3-share-toast[data-visible="true"] {
  opacity: 1;
  transform: translateY(0);
}

/* ── Body / bottom-band collapse so their 4 panels hoist into .sv3-inner ─ */
#perch-scene-dlg .sv3-body,
#perch-scene-dlg .sv3-bottom-band {
  display: contents;
}

/* The image cell is positioned at its engine rect; the stage centres within it
   at the engine's exact fitImage size (set inline by relayout). */
#perch-scene-dlg .sv3-image-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
}

#perch-scene-dlg .sv3-image-stage {
  position: relative;
  background: #000;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow:
    0 28px 60px rgba(0, 0, 0, 0.5),
    0 2px 6px rgba(0, 0, 0, 0.3);
  /* width / height / aspect-ratio are set inline by relayout (fitImage). The
     engine owns image sizing now — no max-height clamp (it would clip the
     engine-sized stage). */
  max-width: none;
  max-height: none;
  transition: opacity 0.18s ease;
}
#perch-scene-dlg .sv3-image-stage.is-image-loading {
  opacity: 0.7;
}
#perch-scene-dlg .sv3-image {
  width: 100%;
  height: 100%;
  /* contain (not cover): the stage is sized to the image's natural aspect
     (inline aspect-ratio from JS), so contain == cover when the box matches —
     but on height-clamped breakpoints where the box can't match, contain keeps
     the subject fully visible instead of slicing it. */
  object-fit: contain;
  display: block;
}
#perch-scene-dlg .sv3-loupe-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: transparent;
  transition: background 0.28s ease;
}
#perch-scene-dlg .sv3-markers {
  position: absolute;
  inset: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
}
#perch-scene-dlg .sv3-marker-group {
  pointer-events: auto;
  cursor: zoom-in;
  /* iter2 fade behavior — markers default to opacity 0 and fade in when the
     image-stage's data-overlay-state flips to visible/sticky. The stagger
     custom property is set per-marker in JS (var(--marker-idx)). */
  opacity: 0;
  transition: opacity 200ms ease;
}
#perch-scene-dlg .sv3-image-stage[data-overlay-state="visible"] .sv3-marker-group,
#perch-scene-dlg .sv3-image-stage[data-overlay-state="sticky"] .sv3-marker-group {
  opacity: 1;
  transition-delay: calc(var(--marker-idx, 0) * 40ms);
}
/* Rectangle bbox marker — orange ("golden") outline, brighter when active. */
#perch-scene-dlg .sv3-marker-rect {
  fill: transparent;
  stroke: rgba(227, 134, 63, 0.78);            /* orange family */
  stroke-width: 2.2;                            /* px units (non-scaling-stroke) */
  transition: stroke 0.18s, stroke-width 0.18s, filter 0.18s;
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.55));
}
#perch-scene-dlg .sv3-marker-group[data-active="true"] .sv3-marker-rect {
  stroke: var(--orange);
  stroke-width: 3.2;
  filter: drop-shadow(0 0 8px rgba(227, 134, 63, 0.55));
}
#perch-scene-dlg .sv3-marker-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.70);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  border: 1.5px solid rgba(255, 255, 255, 0.40);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.40);
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
#perch-scene-dlg .sv3-marker-group[data-active="true"] .sv3-marker-badge {
  background: var(--orange);
  color: #0d0d0b;
  border-color: #fff;
}

#perch-scene-dlg .sv3-hover-tooltip {
  position: absolute;
  transform: translate(-50%, 0);
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 10.5px;
  padding: 4px 10px;
  border-radius: 6px;
  pointer-events: none;
  white-space: nowrap;
  z-index: 4;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* ── Crops panel ─────────────────────────────────────────────────────── */
/* Positioned at its engine rect; a header row on top + a host that holds the
   absolutely-tiled crops (big 2×2 + N−1 smalls), sized by cropsFit so they fit
   the host without a scrollbar (the host scrolls only in the rare cramped case). */
#perch-scene-dlg .sv3-crops-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  min-height: 0;
}
#perch-scene-dlg .sv3-crops-host {
  flex: 1 1 0;
  position: relative;
  min-height: 0;
  min-width: 0;
  overflow: auto;
}
/* big-wrap + grid no longer generate boxes — their tiles position absolutely
   against .sv3-crops-host. (grid[hidden] still hides via the [hidden] rule.) */
#perch-scene-dlg .sv3-crops-big-wrap,
#perch-scene-dlg .sv3-crops-grid {
  display: contents;
}
#perch-scene-dlg .sv3-crops-host .sv3-crops-big,
#perch-scene-dlg .sv3-crops-host .sv3-crop-tile {
  position: absolute;
  width: auto;
  height: auto;
  max-width: none;
  aspect-ratio: auto;
  margin: 0;
}
#perch-scene-dlg .sv3-crops-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex: 0 0 auto;
}
#perch-scene-dlg .sv3-section-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-low);
  font-weight: 600;
  font-family: var(--font-ui);
}
#perch-scene-dlg .sv3-crop-count {
  font-size: 10px;
  color: var(--muted-low);
  font-variant-numeric: tabular-nums;
}
#perch-scene-dlg .sv3-crops-big {
  position: relative;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  animation: sv3-focus-promote 0.26s cubic-bezier(0.32, 0.72, 0.21, 1) both;
  transition: border-color 0.22s ease, box-shadow 0.22s ease;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.32);
}
#perch-scene-dlg .sv3-crops-big[data-promoted="true"] {
  border-color: rgba(227, 134, 63, 0.55);
}
/* Golden outline when the user is hovering a bird on the image — a clearer
   visual link between "the bird I'm hovering" and "the big crop." */
#perch-scene-dlg .sv3-crops-big[data-image-hover="true"] {
  border-color: var(--orange);
  box-shadow:
    0 0 0 2px rgba(227, 134, 63, 0.35),
    0 14px 30px rgba(0, 0, 0, 0.32);
}
#perch-scene-dlg .sv3-crops-big > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
#perch-scene-dlg .sv3-sharpest-caption {
  position: absolute;
  bottom: 9px;
  right: 10px;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
  padding: 2px 7px;
  border-radius: 4px;
  font-family: var(--font-ui);
}
#perch-scene-dlg .sv3-sharpest-caption[hidden] { display: none; }

#perch-scene-dlg .sv3-num-badge {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.70);
  color: #fff;
  font-family: var(--font-ui);
  font-weight: 700;
  border: 1.5px solid rgba(255, 255, 255, 0.30);
  border-radius: 50%;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
#perch-scene-dlg .sv3-num-badge[data-active="true"] {
  background: var(--orange);
  color: #0d0d0b;
  border-color: #fff;
}
#perch-scene-dlg .sv3-num-badge--big {
  top: 10px;
  left: 10px;
  width: 26px;
  height: 26px;
  font-size: 11.5px;
}
#perch-scene-dlg .sv3-num-badge--small {
  top: 6px;
  left: 6px;
  width: 20px;
  height: 20px;
  font-size: 9.5px;
}

#perch-scene-dlg .sv3-crops-grid[hidden] { display: none; }
#perch-scene-dlg .sv3-crop-tile {
  border: 1.5px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  cursor: pointer;
  transition: border-color 0.18s, box-shadow 0.22s;
  box-shadow: none;
}
#perch-scene-dlg .sv3-crop-tile[data-active="true"] {
  border-color: var(--orange);
  box-shadow: 0 8px 18px rgba(227, 134, 63, 0.22);
}
#perch-scene-dlg .sv3-crop-tile > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.82;
  transition: opacity 0.18s;
}
#perch-scene-dlg .sv3-crop-tile[data-active="true"] > img { opacity: 1; }
#perch-scene-dlg .sv3-crops-empty {
  font-size: 11px;
  color: var(--muted-low);
  line-height: 1.5;
  text-align: center;
  padding: 14px 12px;
  background: var(--card);
  border: 1px dashed var(--border);
  border-radius: 10px;
  font-family: var(--font-ui);
}
#perch-scene-dlg .sv3-crops-empty[hidden] { display: none; }

/* ── Filmstrip (positioned at its engine rect) ───────────────────────── */
#perch-scene-dlg .sv3-filmstrip-wrap {
  display: flex;
  gap: 4px;
  align-items: center;          /* don't vertically stretch tiles in a thin band */
  padding: 4px;
  border-radius: 12px;
  background: var(--card);
  /* No wrapper border — the frame tiles already carry their own hairline, so a
     box-around-boxes reads noisy. The --card tint alone groups the strip. */
  min-width: 0;
  overflow: hidden;
}
/* "mini" tier (very thin band): drop the per-frame meta row — tile widths +
   thumb heights are sized from the band height in JS. */
#perch-scene-dlg .sv3-filmstrip-wrap[data-strip="mini"] .sv3-frame-meta { display: none; }
#perch-scene-dlg .sv3-scene-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: transparent;
  color: var(--muted);
  /* Quiet icon button — no border; a background tint provides the hover
     affordance instead (see :hover below). */
  border: 0;
  border-radius: 8px;
  font-family: var(--font-ui);
  font-size: 10.5px;
  cursor: pointer;
  white-space: nowrap;
  align-self: center;
  transition: color 0.18s, background 0.18s;
}
#perch-scene-dlg .sv3-scene-nav:hover:not([disabled]) {
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink-dim);
}
#perch-scene-dlg .sv3-scene-nav[disabled] {
  opacity: 0.35;
  cursor: default;
}
#perch-scene-dlg .sv3-scene-nav[hidden] { display: none; }
#perch-scene-dlg .sv3-scene-chev {
  font-size: 14px;
  line-height: 1;
  color: var(--muted);
}
#perch-scene-dlg .sv3-scene-nav[data-compact="true"] .sv3-scene-label {
  display: none;
}
#perch-scene-dlg .sv3-scene-nav[data-compact="true"] {
  padding: 8px 10px;
}

#perch-scene-dlg .sv3-filmstrip {
  display: flex;
  gap: 8px;
  flex: 1 1 auto;
  overflow-x: auto;
  padding: 2px;
  min-width: 0;
  scrollbar-width: thin;
}
#perch-scene-dlg .sv3-filmstrip::-webkit-scrollbar { height: 6px; }
#perch-scene-dlg .sv3-filmstrip::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 3px;
}
#perch-scene-dlg .sv3-frame-tile {
  flex: 0 0 132px;                /* default; relayout overrides the basis inline from band height */
  align-self: center;            /* tile is its own height (thumb + meta), not stretched */
  display: flex;
  flex-direction: column;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.18s;
  text-align: left;
  outline: none;
  font-family: var(--font-ui);
}
#perch-scene-dlg .sv3-frame-tile:hover { border-color: var(--border-mid); }
#perch-scene-dlg .sv3-frame-tile[data-active="true"] {
  background: var(--orange-dim);
  border-color: rgba(227, 134, 63, 0.66);
}
#perch-scene-dlg .sv3-frame-thumb {
  position: relative;
  aspect-ratio: 3 / 2;
  background: #000;
  overflow: hidden;
}
#perch-scene-dlg .sv3-frame-thumb > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
#perch-scene-dlg .sv3-frame-num {
  position: absolute;
  top: 4px;
  left: 4px;
  background: rgba(0, 0, 0, 0.70);
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
}
#perch-scene-dlg .sv3-frame-sharpness {
  position: absolute;
  bottom: 4px;
  right: 4px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(0, 0, 0, 0.70);
  color: #fff;
  font-size: 9px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 3px;
  font-variant-numeric: tabular-nums;
}
#perch-scene-dlg .sv3-sharpness-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--muted);
}
#perch-scene-dlg .sv3-frame-sharpness[data-tier="green"] .sv3-sharpness-dot { background: var(--green); }
#perch-scene-dlg .sv3-frame-sharpness[data-tier="orange"] .sv3-sharpness-dot { background: var(--orange); }
#perch-scene-dlg .sv3-frame-sharpness[data-tier="red"] .sv3-sharpness-dot { background: var(--red); }

#perch-scene-dlg .sv3-frame-meta {
  padding: 5px 8px 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
#perch-scene-dlg .sv3-frame-label {
  font-size: 10px;
  color: var(--muted);
  font-weight: 500;
  font-family: var(--font-ui);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#perch-scene-dlg .sv3-frame-tile[data-active="true"] .sv3-frame-label {
  color: var(--ink);
  font-weight: 600;
}
#perch-scene-dlg .sv3-frame-count {
  font-size: 9.5px;
  color: var(--muted-low);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── Comments (positioned at its engine rect; relocated into the float sheet
      when the winning layout has commentsFloat) ───────────────────────── */
#perch-scene-dlg .sv3-comments {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  min-height: 0;
  min-width: 0;
}
/* In float mode the real comments DOM is moved into the bottom-sheet; it fills
   the sheet column (header is replaced by the sheet's own grip/title). */
#perch-scene-dlg .sv3-float-sheet .sv3-comments {
  position: static;
  width: 100%;
  height: auto;
  flex: 1 1 auto;
  background: transparent;
  border: 0;
  border-radius: 0;
}
#perch-scene-dlg .sv3-float-sheet .sv3-comments-header { display: none; }
#perch-scene-dlg .sv3-comments-header {
  padding: 7px 12px;
  display: flex;
  align-items: baseline;
  gap: 7px;
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}
#perch-scene-dlg .sv3-comments-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.02em;
}
#perch-scene-dlg .sv3-comment-count {
  font-size: 10.5px;
  color: var(--muted-low);
  font-variant-numeric: tabular-nums;
}
#perch-scene-dlg .sv3-comments-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-height: 0;
}
#perch-scene-dlg .sv3-cmt-empty {
  color: var(--muted-low);
  font-size: 11px;
  margin: 0;
}
#perch-scene-dlg .sv3-cmt {
  display: flex;
  gap: 8px;
}
#perch-scene-dlg .sv3-cmt-avatar {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(121, 168, 216, 0.85), rgba(121, 168, 216, 0.45));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #0d0d0b;
  font-size: 9.5px;
  font-weight: 700;
  font-family: var(--font-ui);
}
#perch-scene-dlg .sv3-cmt-avatar[data-you="true"] {
  background: linear-gradient(135deg, rgba(123, 179, 125, 0.85), rgba(123, 179, 125, 0.45));
}
#perch-scene-dlg .sv3-cmt-body { flex: 1; min-width: 0; }
#perch-scene-dlg .sv3-cmt-head {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 1px;
}
#perch-scene-dlg .sv3-cmt-who {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
}
#perch-scene-dlg .sv3-cmt-ts {
  font-size: 9.5px;
  color: var(--muted-low);
}
#perch-scene-dlg .sv3-cmt-del {
  margin-left: auto;
  font-size: 9px;
  background: none;
  border: 0;
  color: var(--muted-low);
  cursor: pointer;
  padding: 0 2px;
  font-family: var(--font-ui);
}
#perch-scene-dlg .sv3-cmt-del:hover { color: var(--red); }
#perch-scene-dlg .sv3-cmt-text {
  font-size: 11px;
  color: var(--ink-dim);
  line-height: 1.45;
  word-wrap: break-word;
}
#perch-scene-dlg .sv3-cmt-ref {
  background: var(--orange-dim);
  color: var(--orange);
  border: 1px solid rgba(227, 134, 63, 0.20);
  border-radius: 4px;
  padding: 0 5px;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font-ui);
  vertical-align: 1px;
}
#perch-scene-dlg .sv3-cmt-ref:hover { background: rgba(227, 134, 63, 0.22); }
#perch-scene-dlg .sv3-comments-composer {
  padding: 7px 9px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 6px;
  align-items: center;
  flex: 0 0 auto;
  position: relative;
}
#perch-scene-dlg .sv3-cmt-input {
  flex: 1;
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 5px 9px;
  font-size: 11.5px;
  font-family: var(--font-ui);
  outline: none;
  min-width: 0;
}
#perch-scene-dlg .sv3-cmt-input:focus { border-color: var(--border-mid); }
#perch-scene-dlg .sv3-cmt-post {
  background: var(--green-dim);
  color: var(--green);
  border: 1px solid rgba(123, 179, 125, 0.27);
  border-radius: 7px;
  padding: 5px 11px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-ui);
}
#perch-scene-dlg .sv3-cmt-post:hover:not(:disabled) {
  background: rgba(123, 179, 125, 0.22);
}
#perch-scene-dlg .sv3-cmt-post:disabled { opacity: 0.5; cursor: default; }
#perch-scene-dlg .sv3-cmt-blocked {
  color: var(--muted-low);
  font-size: 11px;
  margin: 0;
  padding: 5px 2px;
}

#perch-scene-dlg .sv3-mention-pop {
  background: rgba(13, 13, 11, 0.96);
  border: 1px solid var(--border-mid);
  border-radius: 8px;
  padding: 4px 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
  max-height: 160px;
  overflow-y: auto;
}
#perch-scene-dlg .sv3-mention-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: transparent;
  border: 0;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 11.5px;
  padding: 4px 10px;
  cursor: pointer;
  text-align: left;
}
#perch-scene-dlg .sv3-mention-item:hover { background: rgba(255, 255, 255, 0.05); }
#perch-scene-dlg .sv3-mention-num {
  color: var(--orange);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
#perch-scene-dlg .sv3-mention-lbl { color: var(--muted); }

/* ── Favorites synthetic-scene context ───────────────────────────────── */
/* createSceneDialog stamps data-context="likes" (not "favorites") for the
   __likesContext synthetic scene — keep this selector matched to that value.
   Sharpness rank is meaningless across a hand-picked favorites set. */
#perch-scene-dlg[data-context="likes"] .sv3-sharpest-caption {
  display: none !important;
}

/* ════════════════════════════════════════════════════════════════════════
   ENGINE-MODEL EXTRAS (phone header · crop flyout · floating comments)
   The panel positioning above is fully driven by the engine. What remains
   here is keyed off the stamped [data-layout] = phone|tablet|desktop class:
   the phone single-row header, the touch-gesture/coach affordances, the
   crops-hidden tap-reveal flyout, and the phone-class floating-comments UI.
   ════════════════════════════════════════════════════════════════════════ */

/* Phone header: one clean row. Identity shrinks (title ellipsis); species tag +
   actions stay; brand/share-label/like-label/family/capture are hidden by the
   JS progressive disclosure (.sv3-disc-hidden). */
#perch-scene-dlg[data-layout="phone"] .sv3-header {
  gap: 8px;
  padding: 8px 12px;
  flex-wrap: nowrap;
  align-items: center;
}
#perch-scene-dlg[data-layout="phone"] .sv3-identity { flex: 1 1 auto; min-width: 0; }
#perch-scene-dlg[data-layout="phone"] .sv3-title-row { flex-wrap: nowrap; min-width: 0; }
#perch-scene-dlg[data-layout="phone"] .sv3-title {
  font-size: 17px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#perch-scene-dlg[data-layout="phone"] .sv3-meta-line { flex-wrap: nowrap; overflow: hidden; }
#perch-scene-dlg[data-layout="phone"] .sv3-tags { flex: 0 0 auto; }
#perch-scene-dlg[data-layout="phone"] .sv3-actions { margin-left: auto; flex: 0 0 auto; gap: 8px; }

/* ── Transient crop flyout (winner.hidden includes 'crops' → tap a marker) ──
   Tapping a bird marker on the image docks that bird's crop over the bottom UI;
   auto-dismisses after 5s, or on the next pointer move (desktop). */
#perch-scene-dlg .sv3-crop-flyout {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  justify-content: center;
  padding: 14px 14px 16px;
  background: linear-gradient(to top, rgba(13, 13, 11, 0.96), rgba(13, 13, 11, 0));
  pointer-events: none;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
#perch-scene-dlg .sv3-crop-flyout[hidden] { display: none; }
#perch-scene-dlg .sv3-crop-flyout[data-visible="true"] { opacity: 1; transform: none; }
#perch-scene-dlg .sv3-crop-flyout-tile {
  position: relative;
  width: min(64vw, 200px);
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid var(--orange);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6);
  background: #000;
}
#perch-scene-dlg .sv3-crop-flyout-tile > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ════════════════════════════════════════════════════════════════════════
   FLOATING COMMENTS (phone-class layouts — winner.commentsFloat)
   No comments panel: a speech-bubble FAB (live count) lifted above the
   filmstrip, a transient bubble that surfaces the latest comment then fades,
   and a tap-to-expand bottom-sheet holding the REAL comments DOM. All of it is
   appended INSIDE .sv3-inner so it shares the dialog's top layer (showModal).
   ════════════════════════════════════════════════════════════════════════ */
#perch-scene-dlg .sv3-float-fab {
  position: absolute;
  z-index: 24;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 13px 9px 11px;
  border-radius: 999px;
  cursor: pointer;
  background: rgba(20, 19, 17, 0.82);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-mid);
  color: var(--ink-dim);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.5);
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 600;
  transition: transform 0.16s ease, border-color 0.18s, background 0.18s;
}
#perch-scene-dlg .sv3-float-fab:hover {
  transform: translateY(-2px);
  border-color: var(--border-hi);
  background: rgba(28, 27, 24, 0.9);
}
#perch-scene-dlg .sv3-float-fab svg { display: block; color: var(--orange); }
#perch-scene-dlg .sv3-float-fab-count { font-variant-numeric: tabular-nums; color: var(--ink); }
#perch-scene-dlg .sv3-float-fab-dot {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 2px rgba(20, 19, 17, 0.9);
  opacity: 0;
  transition: opacity 0.2s;
}
#perch-scene-dlg .sv3-float-fab[data-unread="true"] .sv3-float-fab-dot { opacity: 1; }

#perch-scene-dlg .sv3-float-bubble {
  position: absolute;
  z-index: 23;
  max-width: min(78%, 320px);
  padding: 9px 12px;
  border-radius: 13px;
  background: rgba(28, 27, 24, 0.94);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-mid);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55);
  font-family: var(--font-ui);
  display: flex;
  gap: 8px;
  align-items: flex-start;
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.26s ease, transform 0.26s cubic-bezier(0.32, 0.72, 0.21, 1);
}
#perch-scene-dlg .sv3-float-bubble[data-show="true"] { opacity: 1; transform: none; }
#perch-scene-dlg .sv3-float-bubble-av {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #0d0d0b;
  background: linear-gradient(135deg, rgba(121, 168, 216, 0.9), rgba(121, 168, 216, 0.5));
}
#perch-scene-dlg .sv3-float-bubble-who { font-size: 11px; font-weight: 600; color: var(--ink); }
#perch-scene-dlg .sv3-float-bubble-text { font-size: 11.5px; color: var(--ink-dim); line-height: 1.4; margin-top: 1px; }

#perch-scene-dlg .sv3-float-backdrop {
  position: absolute;
  inset: 0;
  z-index: 30;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.24s ease;
}
#perch-scene-dlg .sv3-float-backdrop[data-open="true"] { opacity: 1; pointer-events: auto; }
#perch-scene-dlg .sv3-float-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 31;
  max-height: 74%;
  min-height: 230px;
  display: flex;
  flex-direction: column;
  background: rgba(20, 19, 17, 0.98);
  backdrop-filter: blur(20px);
  border-top: 1px solid var(--border-mid);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.6);
  transform: translateY(102%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0.21, 1);
}
#perch-scene-dlg .sv3-float-sheet[data-open="true"] { transform: none; }
#perch-scene-dlg .sv3-float-grip {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 0 4px;
  cursor: grab;
  touch-action: none;
}
#perch-scene-dlg .sv3-float-grip .bar { width: 42px; height: 4px; border-radius: 999px; background: var(--border-hi); }
#perch-scene-dlg .sv3-float-grip-title {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.02em;
}
#perch-scene-dlg .sv3-float-grip-title span { color: var(--muted-low); font-weight: 500; margin-left: 5px; }
@media (prefers-reduced-motion: reduce) {
  #perch-scene-dlg .sv3-float-sheet,
  #perch-scene-dlg .sv3-float-backdrop,
  #perch-scene-dlg .sv3-float-bubble { transition: none; }
}

/* ── Touch gestures: own both axes on the image (phone + tablet) ──────────
   The image claims horizontal (frame) + vertical (scene) swipes; the rest of
   the page keeps its natural pan-y scrolling. */
#perch-scene-dlg[data-layout="phone"]  .sv3-image-stage,
#perch-scene-dlg[data-layout="tablet"] .sv3-image-stage { touch-action: none; }

/* First-load two-axis coach-mark (phone + tablet). */
#perch-scene-dlg .sv3-coach { display: none; }
#perch-scene-dlg .sv3-coach[hidden] { display: none; }
#perch-scene-dlg[data-layout="phone"] .sv3-coach,
#perch-scene-dlg[data-layout="tablet"] .sv3-coach {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: absolute;
  inset: 0;
  padding-bottom: 16px;
  background: rgba(0, 0, 0, 0.32);
  pointer-events: none;          /* taps/swipes pass straight through */
  z-index: 4;
  opacity: 0;
  transition: opacity 0.3s ease;
}
#perch-scene-dlg[data-layout="phone"] .sv3-coach[hidden],
#perch-scene-dlg[data-layout="tablet"] .sv3-coach[hidden] { display: none; }
#perch-scene-dlg .sv3-coach[data-visible="true"] { opacity: 1; }
#perch-scene-dlg .sv3-coach-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  background: rgba(0, 0, 0, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  font-size: 11px;
  color: #fff;
  font-family: var(--font-ui);
}
#perch-scene-dlg .sv3-coach-ax--h { color: var(--orange); }
#perch-scene-dlg .sv3-coach-ax--v { color: var(--sky); }
#perch-scene-dlg .sv3-coach-dot { opacity: 0.4; }

@media (prefers-reduced-motion: reduce) {
  #perch-scene-dlg .sv3-coach { transition: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   RESPONSIVE TIMELINE CARD GRID (perch + group viewers)
   Phone (<640): 2 columns. Tablet (640–1024): 3 columns. The deployed card
   styling is preserved — only the column density changes, plus a couple of
   "what shrinks" tweaks (crop inset, padding) so a card survives the narrow
   column. Desktop keeps the density-driven auto-fill grid above.

   Scoped to #perch-timeline / #g-timeline so the home grid and any other
   .p-grid usages are untouched. The id scope also out-specifies the base
   .p-grid / .p-timeline-grid rules, so the column override wins without
   fighting the density --p-card-min variable.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 639px) {
  #perch-timeline,
  #g-timeline {
    padding: 16px 12px 24px !important;   /* override the inline 22px 26px 30px */
  }
  #perch-timeline .p-grid,
  #g-timeline .p-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
  }
  /* Bird-crop inset is full-size on desktop; shrink it so it doesn't swamp a
     ~170px-wide card. */
  #perch-timeline .p-bird-crop-inset,
  #g-timeline .p-bird-crop-inset {
    width: 54px;
    height: 54px;
    bottom: 6px;
    right: 6px;
    border-width: 2px;
  }
  #perch-timeline .p-card-body,
  #g-timeline .p-card-body { padding: 7px 9px 9px; }
  #perch-timeline .p-card-ttl,
  #g-timeline .p-card-ttl { font-size: 12.5px; }
}

@media (min-width: 640px) and (max-width: 1024px) {
  #perch-timeline,
  #g-timeline {
    padding: 18px 16px 26px !important;
  }
  #perch-timeline .p-grid,
  #g-timeline .p-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }
  #perch-timeline .p-bird-crop-inset,
  #g-timeline .p-bird-crop-inset {
    width: 64px;
    height: 64px;
  }
}