/* recording.css — reScribe 2.0 Phase 3 additions to the Recording screen
 * (board: Recording): the photo button in the slot left of Finish, its count
 * badge, and the PHOTOS ON THE TIMELINE section. The rest of the screen keeps
 * its shipped look (its CSS lives in app.css, untouched until Phase 9).
 * 2.0 tokens only; the screen is forced dark ([data-immersive="dark"]), which
 * the 2.0 dark block covers. */

/* The skill accent end to end (Randy 2026-09-30): the shipped screen paints
 * with the legacy pink family (app.css), so "Talk it out" read pink and then
 * flipped to iris on Processing. The capture re-points that family at the
 * skill's --accent* (the element carries data-skill), so every pink rule —
 * pill, bars, Finish, ring, tip, Stops-in / speakers pills — follows the
 * skill. Batch 16 §2c (OQ 285 c): Meetings too — the shipped vivid #FF2E74
 * sat beside the soft Meetings pink of the wave, photo badge and rename
 * Save on the same screen; now the whole screen is the section token. */
.rec {
  --pink: var(--accent);
  --pink-text: var(--accent-ink);
  --pink-soft: var(--accent-tint);
  --pink-line: var(--accent-tint-line);
  --shadow-pink: 0 10px 30px var(--accent-glow);
}
/* …except the /reScribe wordmark (WORDMARK RULE, Randy 2026-10-16, batch
 * 17B; first OPEN-QUESTIONS #44, 2026-09-30: it read iris on a Journal
 * recording): the Meetings token for the current theme on EVERY capture —
 * Meetings, Journal, Cookbook — never the section's --accent-ink. The bridge
 * above re-points the legacy pink family, not --meetings-ink, so no alias is
 * needed (batch 17 §6's body-level alias is gone). */
.rec .wordmark__name {
  color: var(--meetings-ink);
}
[data-theme="dark"] .rec .rec__finish {
  box-shadow: 0 2px 10px var(--accent-glow);
}
@media (prefers-reduced-motion: no-preference) {
  .rec .rec__pill .dot {
    animation-name: recRingAccent;
  }
}
@keyframes recRingAccent {
  0%,
  100% {
    box-shadow: 0 0 0 3px var(--accent-tint-line);
  }
  50% {
    box-shadow: 0 0 0 3px var(--accent-glow);
  }
}

.rec__photo {
  position: relative;
}
.rec__photo:disabled {
  opacity: 0.45;
}
.rec__photocount {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  box-sizing: border-box;
  border-radius: 11px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 11.5px;
  font-weight: 780;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--s-page);
  font-variant-numeric: tabular-nums;
}
.rec__photocount[hidden] {
  display: none;
}
.rec__photos {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}
.rec__photos:empty {
  display: none;
}
/* With photos the WHOLE middle scrolls as one unit (Randy 2026-10-01: the
 * photo list was its own sub-scroller squeezed into ~30–40px between the
 * status region and the Finish row). The wordmark + RECORDING badge row
 * (.rec__top) and the Finish row (.rec__controls) sit outside .rec__center,
 * so they stay put; everything between — title, timer, waveform, status,
 * mic hint, photos — keeps its natural height and scrolls together. Applies
 * to every skill that records with photos (Meetings, Journal, …): it is one
 * shared screen. */
.rec__center.has-photos {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.rec__center.has-photos > *,
.rec__center.has-photos .rec__tregion {
  flex: 0 0 auto;
}
.rec__center.has-photos .rec__photos {
  padding-bottom: 8px;
}
.rec__photolist {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rec__photolist .rec__photocard {
  flex: none;
}
.rec__photoshead {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--t-label);
}
.rec__photosn {
  height: 20px;
  min-width: 20px;
  padding: 0 6px;
  box-sizing: border-box;
  border-radius: 10px;
  background: var(--s-chip);
  color: var(--t-nav);
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0;
}
.rec__photocard {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px;
  box-sizing: border-box;
  border-radius: var(--r2-bigcard);
  background: var(--s-panel);
  border: 1px solid var(--accent-tint-line);
  box-shadow: var(--sh-raised);
  color: var(--t-primary);
  text-align: left;
  font: inherit;
}
.rec__phototile {
  width: 62px;
  height: 62px;
  flex: none;
  border-radius: 13px;
  background: var(--s-chip);
  color: var(--t-chevron);
  display: flex;
  align-items: center;
  justify-content: center;
}
.rec__phototile svg {
  width: 20px;
  height: 20px;
}
.rec__phototile {
  overflow: hidden;
}
.rec__phototile--img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.rec__photometa {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.rec__phototitle {
  font-size: 14px;
  font-weight: 620;
  letter-spacing: -0.2px;
  line-height: 1.3;
}
.rec__photosub {
  font-size: 11.5px;
  color: var(--t-nav-off);
}
.rec__renameinput {
  width: 100%;
  box-sizing: border-box;
  height: 44px;
  margin: 12px 0;
  padding: 0 12px;
  border-radius: var(--r2-well);
  background: var(--s-well);
  border: 1px solid var(--well-line);
  box-shadow: var(--sh-well);
  color: var(--t-primary);
  font: inherit;
  font-size: 15px;
}
.rec__renamesave {
  width: 100%;
  height: 46px;
  border: 0;
  border-radius: 23px;
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-size: 15px;
  font-weight: 650;
}

/* ---- The shared wave (2.0 batch 2 §12, approved design; js/wave.js) ----
 * ONE canvas component on every recording screen (Meetings and Journal
 * "Talk it out" — the same view, accent from its data-skill) and on Log in /
 * Sign up. The canvas reads two custom properties at draw time:
 *   --wave-stroke  the three wave lines — the section's accent fill
 *   --wave-line    the stationary center line and the two end slits — the
 *                  theme's line token (--dash-line: the 2.0 ramp's most
 *                  visible hairline; the old 7% hairline read too faint on a
 *                  light device in v120)
 * Height is fixed by the spec (recording 120px, auth 96px); width is the
 * column's (the 14px slit inset is inside the canvas). */
.v2-wave {
  display: block;
  width: 100%;
  --wave-stroke: var(--accent);
  --wave-line: var(--dash-line);
}
/* Same 139px footprint as the v119 bar meter (107 + 8 + 24): the timer and
 * everything below hold still. */
.rec__wave {
  width: 100%;
  height: 120px;
  margin: 4px 0 15px;
}
.v2-wave--rec {
  height: 120px;
}
/* Auth has no skill of its own: its canvas carries data-skill="meetings", so
 * --accent is the brand pink — the same pink as its /reScribe wordmark. */
.v2-wave--auth {
  height: 96px;
}