/* /speech-to-text/ only. */
.stt-result { margin-top: 1.25rem; }
#stt-form > .actions + .io,
#stt-form > .stt-info + .io { margin-top: 1.1rem; }
.stt-result + .check { margin-top: 0.75rem; }
#stt-out { min-height: 14rem; font-family: inherit; font-size: 1rem; }
/* A red dot while the microphone is on, so it's obvious the tab is listening. */
#stt-rec.is-recording::before {
  content: "";
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  margin-right: 0.5rem;
  border-radius: 50%;
  background: #d92d20;
  animation: stt-pulse 1s ease-in-out infinite alternate;
}
@keyframes stt-pulse { to { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) { #stt-rec.is-recording::before { animation: none; } }
.stt-speakers { margin-top: 1rem; }
.stt-speakers small { color: var(--ink-2); font: 0.82rem var(--font-sans); letter-spacing: 0; text-transform: none; }

/* Length, size and time estimate for the picked file. */
.stt-info { margin: 0.75rem 0 0; color: var(--ink-2); font-size: 0.9rem; }

/* Play along: the line being spoken is highlighted; click any line to jump there. */
.stt-play {
  margin-top: 1.25rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--field);
}
.stt-play audio { display: block; width: 100%; padding: 0.75rem; }
.stt-lines {
  position: relative; /* line offsets are measured from here when scrolling */
  max-height: 20rem;
  margin: 0;
  padding: 0.25rem 0.5rem 0.5rem;
  overflow-y: auto;
  border-top: 1px solid var(--line);
  list-style: none;
}
.stt-lines button {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: 0.15rem 0.75rem;
  width: 100%;
  padding: 0.55rem 0.65rem;
  border: 0;
  border-radius: 8px;
  background: none;
  box-shadow: none;
  color: var(--ink-2);
  font: 400 0.98rem/1.5 var(--font-sans);
  text-align: left;
  transition: background var(--duration-fast), color var(--duration-fast);
}
.stt-lines time { grid-row: span 2; padding-top: 0.15rem; color: var(--ink-2); font: 0.78rem var(--font-mono); }
.stt-lines b { color: var(--cat); font-size: 0.8rem; font-weight: 650; }
.stt-lines button:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--ink); }
.stt-lines .is-now button {
  background: color-mix(in srgb, var(--cat) 14%, var(--card));
  box-shadow: inset 3px 0 0 var(--cat);
  color: var(--ink);
}
.stt-lines .is-now time { color: var(--cat); }