/* Say it: grabación, medidor, replay y acciones. */
/* "Say it": the word, a level meter and three big buttons. */
.practice-active[data-practice-mode="speak"] #practice-choices:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.speak-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 12px;
  padding: 10px 14px;
  border: 2px solid var(--ad-line-gold);
  border-radius: 16px;
  background: var(--ad-tint-gold);
}
.speak-icon {
  grid-row: 1/3;
  font-size: calc(40px * var(--text-scale, 1));
  line-height: 1;
}
.speak-word {
  font-size: calc(24px * var(--text-scale, 1));
  color: var(--color-ink-album);
}
.speak-es {
  color: #8a7442;
  font-size: calc(13px * var(--text-scale, 1));
}
.speak-meter {
  height: 8px;
  border-radius: 999px;
  background: #e8eef4;
  overflow: hidden;
}
.speak-meter span {
  display: block;
  height: 100%;
  width: calc(var(--level, 0) * 100%);
  background: linear-gradient(90deg, #7fc49a, #2e9a68);
  transition: width 0.08s linear;
}
.speak-actions {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: 8px;
}
.speak-actions button {
  min-height: 56px;
  border: 1px solid var(--color-line-practice);
  border-radius: 14px;
  background: var(--color-surface);
  color: var(--color-ink-dialog);
  font-size: calc(15px * var(--text-scale, 1));
  font-weight: 700;
  box-shadow: 0 3px 0 var(--color-bevel-practice);
}
.speak-actions .speak-record {
  border-color: #2e9a68;
  background: #e3f6ec;
  color: var(--ad-ink-green-2);
  box-shadow: 0 3px 0 #b6dcc6;
}
.speak-actions .speak-self {
  grid-column: 1/-1;
  border-color: var(--ad-line-gold);
  background: var(--ad-tint-gold);
  color: var(--color-ink-reward);
}
.speak-actions .speak-self[hidden] {
  display: none;
}
.speak-actions button:disabled {
  opacity: 0.45;
  box-shadow: none;
}
#practice-choices[data-listening] .speak-record {
  animation: next-glow 1s ease-in-out infinite;
}
.speak-status {
  margin: 0;
  color: var(--ad-ink-steel);
  font-size: calc(13px * var(--text-scale, 1));
  text-align: center;
}
html[data-appearance="dark"] .speak-card {
  background: var(--ad-tint-gold);
  border-color: var(--ad-line-gold);
}
html[data-appearance="dark"] .speak-word {
  color: #fbecc0;
}
html[data-appearance="dark"] .speak-es {
  color: #d8c89a;
}
html[data-appearance="dark"] .speak-meter {
  background: var(--ad-soft);
}
html[data-appearance="dark"] .speak-actions button {
  background: var(--ad-soft);
  border-color: #526e88;
  color: var(--ad-ink-deep);
  box-shadow: none;
}
html[data-appearance="dark"] .speak-actions .speak-record {
  background: #29463a;
  border-color: #5f9a79;
  color: var(--ad-ink-green-2);
}
html[data-appearance="dark"] .speak-status {
  color: var(--ad-ink-steel);
}
html[data-calm="true"] #practice-choices[data-listening] .speak-record {
  animation: none;
}
/* After a heard word: replaying the voice shows on its button, and a big Next waits for the child. */
.speak-actions .speak-replay[data-playing] {
  opacity: 1;
  border-color: #5b8fc4;
  background: var(--ad-soft-keep);
  color: #24557d;
}
.speak-actions .speak-next {
  grid-column: 1/-1;
  min-height: 58px;
  border-color: #28664f;
  background: var(--color-action-confirm);
  color: var(--color-surface);
  font-size: calc(18px * var(--text-scale, 1));
  box-shadow: 0 3px 0 #20553f;
  animation: next-glow 1.2s ease-in-out infinite;
}
.speak-actions .speak-next[hidden] {
  display: none;
}
html[data-calm="true"] .speak-actions .speak-next {
  animation: none;
}
/* One Next only: the panel's, where the child's eyes are. Enter still works through the bar's button. */
body:has(.speak-next:not([hidden])) #practice-bar #practice-next {
  display: none;
}
html[data-appearance="dark"] .speak-actions .speak-next {
  background: #2e775d;
  border-color: #5f9a79;
  color: #fff;
}