/* 書き起こしの発言者・時刻の見出しと発言段落。整形は scripts/transcript-cues.mjs。 */
.transcript-cue {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 26px 0 6px;
  scroll-margin-top: 160px;
}

.transcript-cue-speaker {
  color: var(--speaker, var(--ink));
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.transcript-cue-time {
  color: var(--muted);
  font-family: var(--font-mono, "SF Mono", Menlo, Consolas, monospace);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.transcript-cue-time-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.transcript-speech {
  margin: 0 0 10px;
  padding-left: 14px;
  border-left: 2px solid var(--speaker-line, var(--line));
}

.transcript-cue + .transcript-speech {
  margin-top: 0;
}

[data-speaker-index="1"] { --speaker: #0b63ce; --speaker-line: rgba(11, 99, 206, 0.32); }
[data-speaker-index="2"] { --speaker: #0d7a63; --speaker-line: rgba(13, 122, 99, 0.32); }
[data-speaker-index="3"] { --speaker: #a4442b; --speaker-line: rgba(164, 68, 43, 0.32); }
[data-speaker-index="4"] { --speaker: #6c4bb6; --speaker-line: rgba(108, 75, 182, 0.32); }
[data-speaker-index="5"] { --speaker: #8a6a12; --speaker-line: rgba(138, 106, 18, 0.32); }
[data-speaker-index="6"] { --speaker: #3f5666; --speaker-line: rgba(63, 86, 102, 0.32); }

html[data-color-mode="dark"] [data-speaker-index="1"] { --speaker: #7cbcff; --speaker-line: rgba(124, 188, 255, 0.4); }
html[data-color-mode="dark"] [data-speaker-index="2"] { --speaker: #63d6b4; --speaker-line: rgba(99, 214, 180, 0.4); }
html[data-color-mode="dark"] [data-speaker-index="3"] { --speaker: #ff9f7d; --speaker-line: rgba(255, 159, 125, 0.4); }
html[data-color-mode="dark"] [data-speaker-index="4"] { --speaker: #bda6ff; --speaker-line: rgba(189, 166, 255, 0.4); }
html[data-color-mode="dark"] [data-speaker-index="5"] { --speaker: #e2c35f; --speaker-line: rgba(226, 195, 95, 0.4); }
html[data-color-mode="dark"] [data-speaker-index="6"] { --speaker: #a9bdcb; --speaker-line: rgba(169, 189, 203, 0.4); }

.transcript-cue:target,
.transcript-cue:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 5px;
}

@media (max-width: 480px) {
  .transcript-cue { margin-top: 22px; }
  .transcript-speech { padding-left: 12px; }
}