/* The voices page. Built on the tokens in site.css.

   The gallery is thirty small targets, so the work here is making one
   selected voice unmistakable and keeping the grid scannable at a glance. */

.talk {
  background: var(--navy);
  color: var(--white);
  padding: 74px 0;
}

.talk-inner { width: min(var(--max), calc(100% - 80px)); margin-inline: auto; }

.talk-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.talk-head h2 { margin: 0 0 8px; font-size: clamp(28px, 4vw, 40px); letter-spacing: -.02em; }
.talk-head > div > p { margin: 0; color: var(--on-dark); max-width: 46ch; }
.talk-head .section-kicker { color: var(--aqua); }

.talk-end { background: #b42318; color: #fff; }
.talk-end:hover { background: #99190f; }

.talk-body {
  background: var(--navy-raised);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 18px;
  padding: 22px;
}

.talk-state { margin: 0 0 14px; font-size: 13px; color: var(--aqua); }

.talk-log {
  list-style: none;
  margin: 0;
  padding: 0;
  min-height: 90px;
  max-height: 300px;
  overflow-y: auto;
}

.talk-turn {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 12px;
  padding: 8px 0;
}
.talk-who {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--control); padding-top: 3px;
}
.talk-turn--marlin .talk-who { color: var(--aqua); }
.talk-said { font-size: 15px; line-height: 1.55; color: var(--white); }
/* Interim speech recognition: shown, but visibly not final yet. */
.talk-said.is-partial { opacity: .5; font-style: italic; }

.talk-controls {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .1);
}
.talk-voice { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--on-dark); }
.talk-voice input { width: 16px; height: 16px; accent-color: var(--blue); }

.talk-note {
  max-width: 74ch; margin: 18px 0 0;
  font-size: 12.5px; line-height: 1.65; color: var(--on-dark);
}

/* ── studio ─────────────────────────────────────────────────────────────── */

.studio { padding: 76px 0 84px; }
.studio h1 { font-size: clamp(28px, 4vw, 42px); letter-spacing: -.025em; margin: 0; }

.voice-groups { display: grid; gap: 34px; margin-top: 34px; }
.voice-group h2 {
  font-size: 15px; margin: 0 0 14px;
  display: flex; align-items: center; gap: 9px;
}
.voice-group h2 span {
  font-size: 12px; font-weight: 600; color: var(--control);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: 1px 9px;
}

.voice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
}

.voice {
  display: grid;
  gap: 3px;
  text-align: left;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  cursor: pointer;
  transition: border-color var(--fast) var(--ease),
              box-shadow var(--fast) var(--ease),
              transform var(--fast) var(--ease);
}
.voice:hover { border-color: var(--control); transform: translateY(-1px); }
.voice:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.voice.is-chosen {
  border-color: var(--blue);
  box-shadow: 0 0 0 1px var(--blue), 0 10px 26px -18px var(--blue);
}

.voice-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.voice-name { font-size: 15px; font-weight: 650; color: var(--navy); letter-spacing: -.01em; }
.voice-character { font-size: 12.5px; font-weight: 600; color: var(--blue); }
.voice-note { font-size: 12px; color: var(--muted); line-height: 1.45; }

.voice-play {
  display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--line);
  flex: none;
}
.voice-play svg { width: 11px; height: 11px; fill: var(--navy); }
.voice.is-chosen .voice-play { background: var(--blue); border-color: var(--blue); }
.voice.is-chosen .voice-play svg { fill: #fff; }
/* A voice that is mid-sample reads as active without needing a spinner. */
.voice.is-playing .voice-play { animation: voice-pulse 1s ease-in-out infinite; }
@keyframes voice-pulse { 50% { transform: scale(1.18); } }
@media (prefers-reduced-motion: reduce) {
  .voice.is-playing .voice-play { animation: none; }
  .voice:hover { transform: none; }
}

/* ── design the performance ─────────────────────────────────────────────── */

.design {
  margin-top: 36px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}
.design-title { margin: 0 0 18px; font-size: 19px; letter-spacing: -.015em; }
.design-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.design .field label {
  display: block; font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--control); margin-bottom: 7px;
}
.design input, .design textarea {
  width: 100%; font: inherit; font-size: 14.5px;
  padding: 11px 13px; border: 1px solid var(--line);
  border-radius: 9px; background: var(--white); color: var(--navy);
}
.design textarea { resize: vertical; min-height: 84px; }
.design input:focus-visible, .design textarea:focus-visible {
  outline: 2px solid var(--blue); outline-offset: 1px;
}
.hint { margin: 6px 0 0; font-size: 11.5px; color: var(--control); text-align: right; }

.design-actions {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 18px;
}
.design-actions svg { width: 15px; height: 15px; }
.selected-voice { font-size: 13px; font-weight: 600; color: var(--navy); }
.studio-status { font-size: 13px; color: var(--muted); }
.studio-audio { display: block; width: 100%; margin-top: 16px; height: 38px; }

.studio-note {
  max-width: 74ch; margin: 20px 0 0;
  font-size: 12.5px; line-height: 1.65; color: var(--control);
}

@media (max-width: 860px) {
  .talk-inner { width: calc(100% - 40px); }
  .design-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .talk { padding: 52px 0; }
  .talk-inner { width: calc(100% - 32px); }
  .studio { padding: 48px 0 56px; }
  .voice-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .talk-turn { grid-template-columns: 1fr; gap: 2px; }
  .design { padding: 18px; }
}