/* detail.css — the 2.0 meeting screen + Transcript tab
 * (js/views/meetings/detail.js, js/views/meetings/transcript.js; boards
 * MemoDetail, MemoTasks, MemoSermon, MemoPhotos, Transcript).
 *
 * Same rules as shell.css: 2.0 token names only (never READS a legacy
 * var), no raw hex, no prefers-color-scheme, relative widths
 * (OPEN-QUESTIONS #24), every styled class v2- prefixed.
 *
 * THE BRIDGE. The detail screens reuse a few shared legacy sub-widgets whose
 * CSS lives in app.css and reads the legacy names: the inline editors
 * (inline-edit.js), the .att-row / lineedit family, the tag picker, the AI
 * suggestion cards, the edit hints, the ⋯ menu and the confirm dialogs.
 * Inside .v2-detail those legacy names are REDEFINED to 2.0 values, so the
 * widgets paint in the 2.0 palette without touching app.css (a declaration,
 * not a read — nothing here consumes a legacy value). Bottom sheets mount on
 * <body>, outside this scope, and keep their legacy look until Phase 9.
 */

.v2-detail {
  --pink: var(--accent);
  --pink-text: var(--accent-ink);
  --pink-soft: var(--accent-tint);
  --pink-line: var(--accent-tint-line);
  --pink-wash: var(--accent-pill);
  --bg: var(--s-page);
  --card: var(--s-card);
  --card-2: var(--s-chip);
  --text: var(--t-primary);
  --text-secondary: var(--t-muted);
  --text-tertiary: var(--t-placeholder);
  --line: var(--strip-line);
  --green: var(--done);
  --red: var(--danger);
  --red-text: var(--danger);
  --red-soft: color-mix(in srgb, var(--danger) 16%, transparent);
  --shadow-card: var(--sh-raised);
}

.v2-detail-root {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 100%;
  width: 100%;
}
.v2-dloading {
  padding: 2rem var(--pad-x);
  color: var(--t-muted);
  font-size: 14px;
}
.v2-dmore {
  position: relative;
  flex: none;
}
.v2-dpanel {
  gap: 18px;
  padding-top: 18px;
}

/* ---------- header block: tags · type · title · meta ---------- */
.v2-dhead {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.v2-dhead__row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}
.v2-dtags {
  flex: 1 1 auto;
  min-width: 0;
}
.v2-dtags__chips {
  display: flex;
  flex-wrap: nowrap; /* one row: [project] [tag] [+] — pills ellipsize (item 22) */
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.v2-dtags__chips .v2-dtag {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 60%;
}
.v2-dtags__chips .v2-dtag-add {
  flex: none;
}
.v2-dtag__text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.v2-dtag {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 12px;
  background: var(--s-card);
  border: 1px solid var(--raised-line);
  box-shadow: var(--sh-raised);
  color: var(--accent-ink);
  font: inherit;
  font-size: 12px;
  font-weight: 620;
  white-space: nowrap;
  position: relative;
}
.v2-dtag-add {
  width: 24px;
  height: 24px;
  border-radius: 12px;
  background: transparent;
  border: 1px dashed var(--dash-line);
  color: var(--t-nav-off);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  position: relative;
}
/* 24px visual, 44px hit */
.v2-dtag::after,
.v2-dtag-add::after {
  content: "";
  position: absolute;
  inset: -10px -3px;
}
.v2-dtype {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  margin-left: auto;
}
.v2-dtype__btn {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-ink);
  font: inherit;
  font-size: 13.5px;
  font-weight: 650;
}
/* Tag picker rows (Randy, 2026-09-29): taller tap/highlight area than the
   legacy 38px rows — 12px above and below the name. Two classes so it wins
   over app.css's .tagpicker__opt height. */
.v2-dtags .v2-dtagopt {
  height: auto;
  min-height: 48px;
  padding: 12px 12px;
  border-radius: 10px;
  line-height: 1.3;
}

/* The tag popover is a bubble with the V pointer (item 3, 2026-10-07): the
 * bubble's 12px gap under the row, the pointer aimed by pop-tip.js. */
.v2-dtags > .v2-pop {
  top: calc(100% + 12px);
}

/* Each picker row = the toggle + the primary-tag star (Randy, 2026-09-29). */
.v2-dtags .v2-dtagrow {
  display: flex;
  align-items: stretch;
  gap: 2px;
}
.v2-dtags .v2-dtagrow .v2-dtagopt {
  flex: 1 1 auto;
  min-width: 0;
}
.v2-dtagstar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--hit-min);
  min-height: 48px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--t-placeholder);
  cursor: pointer;
}
.v2-dtagstar.is-on {
  color: var(--accent-ink);
}

/* The type switcher opens toward the screen, anchored on the control's
 * RIGHT edge (Randy 2026-09-30: it ran off the right side). app.css's later
 * .tagmenu { left: 0 } beat .sum-typemenu's left:auto (same specificity), so
 * the menu hung off the control's left edge and grew rightward. Two classes
 * here win outright; the width can never exceed the screen less its gutters. */
.v2-dtype .v2-dtypemenu {
  left: auto;
  right: 0;
  max-width: calc(100vw - 32px);
}

/* "Wrong type? Tap to change it", inside the switcher under its header. */
.v2-dtype__menuhint {
  margin: -4px 0 0;
  padding: 0 10px 8px;
  color: var(--t-muted);
  font-size: 12.5px;
  font-weight: 500;
}
.v2-dtitle {
  margin: 0;
  font-size: 23px;
  font-weight: 720;
  letter-spacing: -0.7px;
  line-height: 1.2;
  text-wrap: pretty;
}
.v2-dtitle__btn {
  border: 0;
  padding: 0;
  background: none;
  color: var(--t-primary);
  font: inherit;
  text-align: left;
}
.v2-dmeta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 11px;
  font-size: 12.5px;
  color: var(--t-nav-off);
  font-variant-numeric: tabular-nums;
}

/* ---------- sections ---------- */
.v2-dbody {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}
/* Batch 35 §1 (feature/one-page-meeting, Randy's device test): a tapped or
 * deep-linked section lands 10 px below the pinned strip (html's
 * scroll-padding-top already clears the bar + strip; this adds the room). */
.v2-detail [data-section] {
  scroll-margin-top: 10px;
}
/* Batch 35 §5: Rename from the menu brings the title editor here too. */
.v2-detail .v2-dtitle {
  scroll-margin-top: 10px;
}
/* Batch 35 §3: bottom overscroll. WKWebView stops DRAWING a sticky box whose
 * bottom edge sits within the overscroll distance of the viewport top; the
 * shared --rb-guard (a 40vh transparent shadow, shell.css "Bottom rubber
 * band guard") covers a normal bounce, but the one-page meeting's short
 * panel tail lets a hard push overscroll further than that — the strip
 * (and the header) were culled and the root background showed through
 * (near-black in dark, blank in light). A deeper transparent shadow on the
 * meeting screens only; the token is unchanged, the look at rest is not. */
.v2-detail > .v2-head {
  box-shadow: var(--rb-guard), 0 100vh 0 0 transparent;
}
.v2-detail > .v2-strip.is-scrollable {
  box-shadow: inset 0 -1px var(--strip-line), var(--rb-guard), 0 100vh 0 0 transparent;
}
/* Batch 35 §4: the "one editor at a time" pulse (inline-edit.js pulseEditor,
 * app.css .iedit--pulse — a 220 ms soft ring Randy could barely see on the
 * phone). On the meeting page: two quick pulses, a brighter ring plus the
 * section's glow, a little longer; shadow only — zero layout shift; the
 * section accent tokens only. Nothing scrolls (goTab returns after the pulse).
 * (An attribute selector for the shared editor class: this stylesheet styles
 * only v2- classes — functions/test/detail-v2.mjs pins it.) */
.v2-detail [class~="iedit--pulse"] {
  animation: dEditPulse 640ms ease;
}
@keyframes dEditPulse {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  25%, 75% { box-shadow: 0 0 0 5px var(--accent-tint-line), 0 0 18px 4px var(--accent-glow); }
  50% { box-shadow: 0 0 0 2px var(--accent); }
}
.v2-dsec {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.v2-dlabel {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--t-label);
}
.v2-dlabel__count {
  color: var(--t-dim);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.4px;
}
.v2-dempty {
  margin: 0;
  font-size: 14px;
  color: var(--t-muted);
}
.v2-dcaption,
.v2-dainote {
  margin: 0 4px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--t-muted);
}

/* The gist: a tinted notice, not a solid block (03-SCREENS MemoDetail). */
.v2-dgist {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 14px 15px;
  border-radius: var(--r2-card);
  background: var(--accent-glass-tint);
  border: 1px solid var(--accent-glass-line);
  box-shadow: var(--sh-raised);
  color: var(--accent-ink);
}
.v2-dgist > svg {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 3px;
}
.v2-dgist__text {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.5;
  font-weight: 450;
  letter-spacing: -0.05px;
  text-wrap: pretty;
  min-width: 0;
  /* Batch 10 §7a: the text takes the row (the resting text already did by
   * its own width); the in-place editor's textarea no longer shrinks the
   * flex item to its 20-column default and wraps twice as tall. */
  flex: 1 1 auto;
}

/* Bulleted lists (key points, decisions, reflect). */
.v2-dbullets {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.v2-dbullets__item {
  display: flex;
  gap: 11px;
  min-width: 0;
}
.v2-dbullets__dot {
  width: 5px;
  height: 5px;
  border-radius: 3px;
  background: var(--accent);
  flex: none;
  margin-top: 8px;
}
.v2-dbullets__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.47;
  color: var(--t-body);
  text-wrap: pretty;
  min-width: 0;
  flex: 1 1 auto;
}
/* Cards. */
.v2-dcard {
  background: var(--s-card);
  border: 1px solid var(--raised-line);
  box-shadow: var(--sh-raised);
  border-radius: var(--r2-card);
  min-width: 0;
}
.v2-dcards {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.v2-dcard--people {
  padding: 4px 13px;
}

/* Action items (board MemoTasks). */
.v2-dcard__row {
  padding: 4px 13px;
  border-bottom: 1px solid var(--strip-line);
}
.v2-dall {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  border: 0;
  padding: 0;
  background: none;
  color: var(--accent-ink);
  font: inherit;
  font-size: 14px;
  font-weight: 620;
}
/* Batch 34 (feature/one-page-meeting): the page's one "View transcript" card
 * reuses this row as a plain link — no underline, so it reads like the row. */
.v2-dview .v2-dall {
  text-decoration: none;
}
.v2-dview .v2-dcard__row {
  border-bottom: 0; /* the row's rule separates it from a list below; the card has none */
}
.v2-dall svg {
  width: 18px;
  height: 18px;
}
.v2-dais {
  margin: 0;
  padding: 0 13px;
  list-style: none;
}
.v2-dai {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--strip-line);
  min-width: 0;
}
.v2-dai:first-child {
  border-top: 0;
}
.v2-dai__check {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  border: 1.5px solid var(--t-chevron);
  background: transparent;
  color: var(--on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex: none;
  position: relative;
}
.v2-dai__check::after {
  content: "";
  position: absolute;
  inset: -10px;
}
.v2-dai__check svg {
  width: 15px;
  height: 15px;
}
/* Green means complete, nothing else (decision 3). */
.v2-dai__check.is-done {
  background: var(--done);
  border-color: var(--done);
}
.v2-dai__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  flex: 1 1 auto;
}
.v2-dai__task {
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--t-body);
}
.v2-dai.is-done .v2-dai__task {
  color: var(--t-muted);
  text-decoration: line-through;
  text-decoration-color: var(--t-chevron);
}
.v2-dai__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.v2-dai__owner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--t-muted);
}
.v2-dai__due {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px;
  border-radius: 11px;
  background: var(--accent-tint);
  color: var(--accent-ink);
  font-size: 12px;
  font-weight: 600;
}
.v2-dai__due svg {
  width: 12px;
  height: 12px;
}

/* Sermon main points (board MemoSermon): numbered, reference + time in the
 * accent. */
.v2-dmain {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.v2-dmain__item {
  display: flex;
  gap: 10px;
  min-width: 0;
}
.v2-dmain__num {
  width: 1.4rem;
  flex: none;
  color: var(--accent-ink);
  font-weight: 700;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.v2-dmain__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.v2-dmain__heading {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--t-primary);
  font-weight: 560;
}
.v2-dmain__meta {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--accent-ink);
}
.v2-dmain__ref {
  font-weight: 620;
}
.v2-dmain__subs {
  margin: 2px 0 0;
  padding-left: 1rem;
  font-size: 14px;
  line-height: 1.45;
  color: var(--t-body);
}

/* Timestamp chip → the transcript at that moment. */
.v2-dts {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  font-weight: 640;
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  position: relative;
}
.v2-dts::after {
  content: "";
  position: absolute;
  inset: -12px -6px;
}

/* Passages / quotes / remarks / objections. */
.v2-dquote {
  padding: 13px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.v2-dquote__ref {
  margin: 0;
  font-size: 14.5px;
  font-weight: 650;
  color: var(--accent-ink);
}
.v2-dquote__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--t-body);
  text-wrap: pretty;
}
.v2-dverse__n {
  font-size: 0.68em;
  font-weight: 700;
  color: var(--t-muted);
  margin-right: 2px;
}
/* The translation's name under looked-up verse text — it was not read aloud. */
.v2-dverse__src {
  margin: 0;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--t-muted);
  letter-spacing: 0.1px;
}
/* A long looked-up passage (whole chapter / wide range) folds shut (Randy
 * 2026-10-03): the reference reads like a main-point title, the toggle sits
 * top right in the type dropdown's style. */
.v2-dpass__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.v2-dpass__ref {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  font-weight: 650;
  color: var(--t-primary);
}
.v2-dpass__toggle {
  flex: none;
  display: flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  margin-top: 0.5px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-ink);
  font: inherit;
  font-size: 13.5px;
  font-weight: 650;
  cursor: pointer;
}
.v2-dpass__toggle svg {
  transition: transform 0.18s ease;
}
.v2-dpass.is-open .v2-dpass__toggle svg {
  transform: rotate(180deg);
}
.v2-dpass__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.v2-dquote__meta {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: var(--t-muted);
}
.v2-dquote__src {
  margin: 0;
  font-size: 12.5px;
  font-weight: 560;
  color: var(--t-muted);
}
.v2-dobj__resp {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--t-muted);
}
.v2-dobj__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--t-label);
  margin-right: 4px;
}

/* Sales pricing. */
.v2-dprice {
  margin: 0;
  padding: 0 13px;
  list-style: none;
}
.v2-dprice__row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--strip-line);
}
.v2-dprice__row:first-child {
  border-top: 0;
}
.v2-dprice__main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}
.v2-dprice__item {
  font-size: 15px;
  font-weight: 560;
}
.v2-dprice__terms {
  font-size: 12.5px;
  color: var(--t-muted);
}
.v2-dprice__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex: none;
  max-width: 45%;
}
.v2-dprice__amount {
  font-size: 15px;
  font-weight: 680;
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Photos (empty state until Phase 3). */
.v2-dphotos {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.v2-dphotos__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.v2-dphotos__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 2rem 1rem;
  border-radius: var(--r2-card);
  border: 1.5px dashed var(--dash-line);
  text-align: center;
}
.v2-dphotos__glyph {
  display: flex;
  color: var(--t-chevron);
}
.v2-dphotos__title {
  margin: 0;
  font-size: 15px;
  font-weight: 620;
}
.v2-dphotos__sub {
  margin: 0;
  font-size: 13px;
  color: var(--t-muted);
  max-width: 22rem;
}

/* ---- Photos tab (Phase 3, boards MemoPhotos / MemoPhotosGrid) ---- */
.v2-dph__frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--s-chip);
  border: 1px solid var(--raised-line);
  box-shadow: var(--sh-raised);
  color: var(--t-chevron);
}
.v2-dph__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 160ms ease;
}
.v2-dph__frame.has-img .v2-dph__img,
[data-photo-frame].has-img .v2-dph__img {
  opacity: 1;
}
.v2-dph__frame.has-img .v2-dph__ph {
  visibility: hidden;
}
.v2-dph__ph {
  display: flex;
}
.v2-dph__frame--list {
  width: 74px;
  height: 74px;
  border-radius: 13px;
  flex: none;
}
.v2-dph__frame--tile {
  width: 100%;
  aspect-ratio: 4 / 3.6;
  border-radius: var(--r2-chip);
}
.v2-dph__frame--card {
  width: 4.25rem;
  height: 4.25rem;
  border-radius: 12px;
  flex: none;
}
.v2-dph-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.v2-dph-row {
  position: relative;
  display: flex;
  gap: 12px;
  padding: 11px;
  border-radius: 17px;
  background: var(--s-card);
  border: 1px solid var(--raised-line);
  box-shadow: var(--sh-raised);
}
.v2-dph-row__thumb,
.v2-dph-row__title,
.v2-dph-tile,
.v2-tphoto {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
}
.v2-dph-row__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-width: 0;
}
.v2-dph-row__title {
  align-self: flex-start;
  font-size: 15px;
  font-weight: 630;
  line-height: 1.3;
  letter-spacing: -0.25px;
}
/* "Sep 29, 2026 · 2:33 PM" under each photo's name (list, grid, viewer). */
.v2-dph-row__when,
.v2-dph-tile__when {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--t-muted);
  font-variant-numeric: tabular-nums;
}
.v2-dph-row__when {
  margin-top: -3px;
}
.v2-dph-tile__when {
  margin-top: 2px;
  font-size: 11.5px;
}
.v2-dph-viewer__head {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.v2-dph-viewer__when {
  font-size: 12.5px;
  color: var(--viewer-muted);
  font-variant-numeric: tabular-nums;
}
/* The whole row is the name button's hit area; the transcript link rides
   above it. */
.v2-dph-row__title::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.v2-dph-row .v2-dph__ts {
  position: relative;
  z-index: 1;
  align-self: flex-start;
}
.v2-dph__ts {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 640;
  color: var(--accent-ink);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  min-height: 24px;
}
.v2-dph-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.v2-dph-tile {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}
.v2-dph-tile__media {
  position: relative;
  display: block;
}
.v2-dph-tile__badge {
  position: absolute;
  left: 7px;
  bottom: 7px;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 21px;
  padding: 0 8px;
  border-radius: 11px;
  background: var(--glass-nav);
  color: var(--accent-ink);
  font-size: 11px;
  font-weight: 660;
  font-variant-numeric: tabular-nums;
}
.v2-dph-tile__title {
  font-size: 12.5px;
  line-height: 1.32;
  color: var(--t-body);
}
.v2-dph-add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  border-radius: var(--r2-card);
  background: transparent;
  border: 1.5px dashed var(--accent-tint-line);
  color: var(--accent-ink);
  font: inherit;
  font-size: 14px;
  font-weight: 620;
}
/* Busy (batch 8 §6b): the same button, filling left → right with the section
 * colour to the batch's real percent (the fill's inline width + the top
 * label's inline clip-path, both set by paintPhotoProgress). The fill is a
 * layer under the words; a clipped copy of the words in --on-accent rides on
 * the filled part so the label reads over both halves. The border turns
 * solid for the duration. Reduce Motion: no transition (the value then moves
 * in 10-point steps from JS). */
.v2-dph-add.is-busy {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-style: solid;
  color: var(--t-muted);
}
.v2-dph-add__fill {
  position: absolute;
  inset: 0;
  width: 0;
  background: var(--accent);
  transition: width 0.18s linear;
  pointer-events: none;
}
.v2-dph-add__label {
  position: relative;
  z-index: 1;
}
.v2-dph-add__label--on {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--on-accent);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.18s linear;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .v2-dph-add__fill,
  .v2-dph-add__label--on {
    transition: none;
  }
}
.v2-dph-add--choose {
  flex-wrap: wrap;
  padding: 8px;
  gap: 8px;
}
.v2-dph-add__opt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 20px;
  background: var(--accent-tint);
  border: 1px solid var(--accent-tint-line);
  color: var(--accent-ink);
  font: inherit;
  font-size: 14px;
  font-weight: 620;
}
.v2-dph-add__cancel {
  min-height: 40px;
  padding: 0 12px;
  background: none;
  border: 0;
  color: var(--t-muted);
  font: inherit;
  font-size: 14px;
}
.v2-dph-full {
  margin: 0;
  font-size: 13px;
  color: var(--t-muted);
  text-align: center;
}

/* The full-screen viewer (Photos tab + transcript cards): black, edge to
   edge, the photo contained on the stage with pinch / double-tap zoom and
   pan (js/photo-zoom.js moves the img with a transform). */
.v2-dph-viewer {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  background: var(--viewer-bg);
  color: var(--viewer-ink);
}
.v2-dph-viewer__top,
.v2-dph-viewer__bar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: max(12px, env(safe-area-inset-left, 0px));
  padding-right: max(12px, env(safe-area-inset-right, 0px));
}
.v2-dph-viewer__top {
  padding-top: max(10px, env(safe-area-inset-top, 0px));
  padding-bottom: 10px;
}
.v2-dph-viewer__bar {
  flex-wrap: wrap;
  justify-content: center;
  padding-top: 10px;
  padding-bottom: max(14px, env(safe-area-inset-bottom, 0px));
}
.v2-dph-viewer__close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--hit-min);
  height: var(--hit-min);
  padding: 0;
  border-radius: 50%;
  background: var(--viewer-chip);
  border: 1px solid var(--viewer-chip-line);
  color: var(--viewer-ink);
}
.v2-dph-viewer__title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 16px;
  font-weight: 640;
  letter-spacing: -0.25px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v2-dph-viewer__stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  cursor: zoom-in;
}
.v2-dph-viewer__stage.is-zoomed {
  cursor: grab;
}
.v2-dph-viewer__ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--viewer-muted);
}
.v2-dph-viewer__stage.has-img .v2-dph-viewer__ph {
  visibility: hidden;
}
.v2-dph-viewer__img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: 0 0;
  -webkit-user-drag: none;
  opacity: 0;
  transition: opacity 160ms ease;
}
.v2-dph-viewer__stage.has-img .v2-dph-viewer__img {
  opacity: 1;
}
.v2-dph-viewer__rename {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  gap: 8px;
  align-items: center;
}
.v2-dph-viewer__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  box-sizing: border-box;
  border-radius: 12px;
  background: var(--viewer-chip);
  border: 1px solid var(--viewer-chip-line);
  color: var(--viewer-ink);
  font: inherit;
  font-size: 16px;
}
.v2-dph-viewer__input::placeholder {
  color: var(--viewer-muted);
}
.v2-dph-viewer__btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: var(--hit-min);
  padding: 0 16px;
  border-radius: 22px;
  background: var(--viewer-chip);
  border: 1px solid var(--viewer-chip-line);
  color: var(--viewer-ink);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.v2-dph-viewer__btn.is-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.v2-dph-viewer__btn.is-danger {
  color: var(--accent);
}

/* Transcript inline photo card ("PHOTO AT 0:27"). */
.v2-tphoto {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px;
  margin: 2px 0 10px;
  box-sizing: border-box;
  border-radius: var(--r2-card);
  background: var(--accent-tint);
  border: 1px solid var(--accent-tint-line);
}
.v2-tphoto__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.v2-tphoto__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
}
.v2-tphoto__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--t-primary);
}

/* ---------- audio ---------- */
/* The one player (decision 22). It renders on the Transcript tab ONLY and
 * sticks directly BELOW the sticky top bar and the pinned section strip
 * (Randy, 2026-09-29), on a band of the panel colour so the transcript
 * scrolls out of sight under all three. */
.v2-dplayer {
  position: sticky;
  bottom: calc(var(--nav-h) + 22px + env(safe-area-inset-bottom, 0px));
  z-index: 5;
}
.v2-tplayer {
  top: calc(env(safe-area-inset-top, 0px) + var(--head-h) + var(--strip-h));
  bottom: auto;
  margin: -8px calc(-1 * var(--pad-x)) 0;
  padding: 8px var(--pad-x) 10px;
  background: var(--s-panel);
}
.v2-daudio {
  margin: 0;
  padding: 12px 14px;
  border-radius: var(--r2-card);
  background: var(--s-card);
  border: 1px solid var(--raised-line);
  font-size: 13px;
  line-height: 1.4;
  color: var(--t-muted);
}

/* ---------- load error ---------- */
.v2-derror {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.v2-derror__text {
  margin: 0;
  font-size: 14.5px;
  color: var(--t-body);
}
.v2-derror__retry {
  height: 40px;
  padding: 0 18px;
  border-radius: 20px;
  border: 0;
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-size: 14px;
  font-weight: 650;
}

/* ---------- Transcript tab ---------- */
.v2-thead {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.v2-thead__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1 1 auto;
}
.v2-thead__title {
  margin: 0;
  font-size: 26px;
  font-weight: 720;
  letter-spacing: -0.7px;
}
.v2-thead__sub {
  margin: 0;
  font-size: 13px;
  color: var(--t-nav-off);
  font-variant-numeric: tabular-nums;
}
.v2-tsearch {
  display: none;
  align-items: center;
  gap: 9px;
  height: 42px;
  padding: 0 6px 0 14px;
  border-radius: var(--r2-well);
  background: var(--s-well);
  border: 1px solid var(--well-line);
  box-shadow: var(--sh-well);
  color: var(--t-nav-off);
}
.v2-tsearch.is-open {
  display: flex;
}
.v2-tsearch__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 40px;
  border: 0;
  outline: none;
  background: none;
  color: var(--t-primary);
  font: inherit;
  font-size: 14.5px;
  -webkit-appearance: none;
  appearance: none;
}
.v2-tsearch__input::placeholder {
  color: var(--t-placeholder);
}
.v2-tsearch__close {
  width: 32px;
  height: 32px;
  border: 0;
  padding: 0;
  background: none;
  color: var(--t-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}
.v2-tsearch__close svg {
  width: 16px;
  height: 16px;
}
.v2-turns {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}
/* Batch 24 §4 (approved mockup): the ten-minute block divider — the range in
 * the section ink (the same token as the play button's time; Meetings pink
 * here), a thin line filling the rest of the row. Scrolls with the text,
 * never sticky; the list's own gap stays. */
.v2-turns__block {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.v2-turns__blocklabel {
  flex: none;
  color: var(--accent-ink);
  font-size: 12px;
  font-weight: 640;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.v2-turns__block::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--strip-line);
}
.v2-turn {
  display: flex;
  flex-direction: column;
  gap: 7px;
  border-radius: 12px;
  margin: 0 -8px;
  padding: 6px 8px;
  transition: background-color 180ms ease;
  /* keep a followed row clear of the sticky player (html's scroll-padding
     already clears the top bar) + the floating nav */
  scroll-margin-top: 96px;
  scroll-margin-bottom: calc(var(--nav-h) + 40px);
}
.v2-turn.is-playing {
  background: var(--accent-pill);
}
.v2-turn.is-jumped {
  background: var(--accent-tint);
}
.v2-turn__head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.v2-turn__avatarbtn {
  border: 0;
  padding: 0;
  background: none;
  display: flex;
  flex: none;
  position: relative;
}
.v2-turn__avatarbtn::after {
  content: "";
  position: absolute;
  inset: -9px;
}
.v2-turn__name {
  border: 0;
  padding: 0;
  background: none;
  color: var(--t-primary);
  font: inherit;
  font-size: 14.5px;
  font-weight: 660;
  letter-spacing: -0.2px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.v2-turn__ts {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 8px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--accent-ink);
  font: inherit;
  font-size: 12px;
  font-weight: 640;
  font-variant-numeric: tabular-nums;
  flex: none;
}
.v2-turn__ts.is-static {
  color: var(--t-nav-off);
}
.v2-turn__glyph--live {
  display: none;
}
.v2-turn.is-playing .v2-turn__glyph--play {
  display: none;
}
.v2-turn.is-playing .v2-turn__glyph--live {
  display: inline;
}
.v2-turn__text {
  margin: 0 0 0 34px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--t-body);
  text-wrap: pretty;
  min-width: 0;
  /* batch 26 §3: a chip jump lands a long turn's SEGMENT at the top, under the
     sticky player — the same clearance as the row's */
  scroll-margin-top: 96px;
}
/* batch 26 §1: a ten-minute divider INSIDE a long turn (the turn spans the
   boundary) — batch 24's row, aligned with the text column, a little air
   around it; never sticky */
.v2-turn > .v2-turns__block {
  margin-left: 34px;
  padding: 4px 0;
}