/**
 * @auggie/synced-transcript — caption styling.
 *
 * Palette lifted from residency/oceanic-stroke-journal-club (ink body text,
 * coral highlight, dimmed past). Every colour is a package-local custom
 * property with a hard fallback, and each falls through to the host's own
 * --ink / --coral tokens when present, so this file drops into either a
 * standalone page or an existing design system without edits.
 */

.st-transcript {
  --st-ink: var(--ink, #17233d);
  --st-coral: var(--coral, #d75b4c);
  --st-dim: rgba(23, 35, 61, 0.36);   /* unspoken (upcoming) words */
  --st-past: rgba(23, 35, 61, 0.65);  /* already-spoken words      */
  --st-highlight: rgba(215, 91, 76, 0.16); /* active-word wash      */

  color: var(--st-dim);
  line-height: 1.7;
}

.st-word {
  color: inherit;
  cursor: pointer; /* click-to-seek */
  border-radius: 2px;
  transition: color 0.15s, background 0.15s;
}

.st-word:hover {
  color: var(--st-ink);
}

.st-past {
  color: var(--st-past);
}

.st-spoken {
  color: var(--st-ink);
  background: var(--st-highlight);
}

/*
 * Optional dockable-pane contract. These classes supply accessible controls
 * and scrolling behavior without imposing a host grid. Layout stays with the
 * consumer via [data-st-dock-position="left|right|below"].
 */
.st-dock-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--st-dock-head-gap, 0.875rem);
}

.st-dock-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--st-dock-control-gap, 0.3125rem);
}

.st-dock-control {
  cursor: pointer;
  border: 1px solid var(--st-dock-control-border, currentColor);
  border-radius: 999px;
  padding: var(--st-dock-control-padding, 0.25rem 0.5rem);
  color: var(--st-dock-control-color, inherit);
  background: var(--st-dock-control-background, transparent);
  font: inherit;
  font-size: var(--st-dock-control-font-size, 0.75rem);
}

.st-dock-control:hover,
.st-dock-control.active,
.st-dock-control[aria-pressed="true"] {
  color: var(--st-dock-control-active-color, inherit);
  border-color: var(--st-dock-control-active-border, currentColor);
  background: var(--st-dock-control-active-background, transparent);
}

.st-transcript-scroll {
  min-height: 0;
  overflow: auto;
  scroll-behavior: smooth;
}