/* ============================================================
   verses track — the chips become verses, in place.

   Two small things only. The reveal row (the kit's .revealRow /
   .reveal, board 7) lines up with the thread's nodes where the chips
   used to be, and verses that have just arrived read in once so the
   reader can see what changed. Everything else is reference.css's own
   .thread / .node / .chips vocabulary and its tokens; no new colours
   are invented here.

   None of this exists without JavaScript: the row is built by
   refui/verses.js, and a page with no script keeps its chips.
   ============================================================ */

/* ---- the reveal row, standing where the chips stand ---- */
.bfBody .revealRow {
  padding-left: 34px; /* the thread's own measure */
  margin-top: 10px;
}
/* styles.css (loaded first, site-wide) already owns a `.reveal`: the
   landing page's scroll-in, which starts at opacity 0 and is lit by a
   `.in` class no reference page adds. The kit's reveal button is not that
   animation, so put it back on its feet here — and let the kit's own busy
   dimming still win. (The clash is the kit's and styles.css's to settle;
   this only rescues the row this track builds.) */
.bfBody .revealRow .reveal {
  opacity: 1;
  transform: none;
  transition: none;
}
.bfBody .revealRow .reveal[aria-busy="true"] {
  opacity: 0.6;
}
.bfBody .reveal {
  min-height: 38px; /* the same touch target as .foldMore .more */
  padding: 8px 15px;
}
.bfBody .reveal:focus-visible {
  outline: 2px solid rgba(91, 227, 213, 0.7);
  outline-offset: 2px;
}
/* "All" flattens the books; the row keeps the thread's indent */
.mentions.flat .bfBody .revealRow {
  margin-top: 8px;
}

/* ---- a verse that has just arrived ---- */
.node.vIn {
  animation: vIn 0.28s ease-out both;
}
@keyframes vIn {
  from {
    opacity: 0;
    transform: translateY(3px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .node.vIn {
    animation: none;
  }
}