/* Under the window: the five chapter tabs (each with a bar that fills while its chapter plays),
   what the current chapter shows, and the pause toggle. Page tokens, from style.css. */

.shot-note { margin-top: var(--space-4); }

.chapters { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.chapters button {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  min-height: 56px;
  padding: var(--space-3) 0 var(--space-2);
  font-size: 13px;
  text-align: left;
  color: var(--text-muted);
  background: none;
  border: 0;
  border-top: 1px solid var(--border);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out);
}
.chapters button:hover, .chapters button[aria-current] { color: var(--text); }
.ch-n { font-size: 10px; letter-spacing: .08em; color: var(--text-muted); }
.chapters button[aria-current] .ch-n { color: var(--accent); }
.ch-bar { position: absolute; top: -1px; left: 0; width: 100%; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.chapters button[aria-current] .ch-bar { transform: none; }
.ch-bar[data-running] { animation: chapter-fill var(--chapter-ms) linear both; }
.shot-wrap[data-paused] .ch-bar { animation-play-state: paused; }

.chapter-note { min-height: calc(2 * 1.7em); margin: var(--space-2) 0 0; max-width: 72ch; font-size: 13px; line-height: 1.7; color: var(--text); }

.shot-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin: 0; font-size: 11px; color: var(--text-muted); }

@keyframes chapter-fill { from { transform: scaleX(0); } }

@media (max-width: 760px) {
  .chapters { gap: var(--space-1); }
  .chapters button { font-size: 11px; }
  .chapter-note { min-height: calc(3 * 1.7em); font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .ch-bar { animation: none !important; }
}