/* Shared styling for the pronunciation read-out. Scoped to its own class
   names so both the Read Aloud player and the shadowing drill can drop the
   same markup into their own very different pages.

   Colour is used to mark WHICH words differed, never to grade them: there is
   no green-for-good scale here, only a neutral phrase with the two things
   worth looking at picked out. */

.pron-line {
  margin: 0;
  font-size: 15px;
  line-height: 1.9;
  word-spacing: 1px;
}

.pron-word {
  border-radius: 4px;
  padding: 1px 2px;
}

/* Said, and nothing to say about it. Deliberately unstyled — marking correct
   words too would turn the line into a scoreboard. */
.pron-word.is-ok {
  color: inherit;
}

/* Said, but something inside it came out differently. */
.pron-word.is-differs {
  background: rgba(180, 105, 14, .13);
  box-shadow: inset 0 -2px 0 rgba(180, 105, 14, .55);
  cursor: help;
}

/* Not found in the recording at all. Dimmed rather than reddened: most often
   this means the microphone missed it or the reader skipped ahead, which is
   not a pronunciation mistake. */
.pron-word.is-missing {
  opacity: .45;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

/* The one-line verdict the reader gets before any detail. */
.pron-verdict {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
}
.pron-verdict.is-clear { color: #0a7a47; }
.pron-verdict.is-quiet { font-weight: 600; opacity: .8; }
.pron-verdict__icon { flex: none; }

/* One card per word that differed. Each card carries the whole loop a
   learner needs: the word, what came out vs what was asked for, and how to
   place the mouth for the target — with a word everyone knows it from. */
.pron-sounds {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* A reading measure, not a fixed width: the cards hold a sentence of
     instruction, and a line that runs the full width of a wide column is
     harder to read, not more generous. `ch` rather than px so it tracks the
     host page's own type size — this component is dropped into three pages
     with different columns. */
  max-width: 62ch;
}

.pron-card {
  padding: 9px 14px;
  border-radius: 12px;
  background: rgba(180, 105, 14, .07);
  border: 1px solid rgba(180, 105, 14, .22);
  font-size: 13px;
  line-height: 1.45;
}
.pron-card.is-more {
  background: none;
  border-style: dashed;
  opacity: .7;
  text-align: center;
}

.pron-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
}
.pron-card__word { font-weight: 700; font-size: 14px; }

.pron-pair { display: inline-flex; align-items: baseline; gap: 5px; }
.pron-pair__label { font-size: 11.5px; opacity: .65; }
.pron-pair__arrow { opacity: .55; font-size: 12px; }

/* speaker on a card — present only when the host page passes `speakWord` */
.pron-say {
  flex: none; align-self: center; margin-left: auto;
  display: inline-grid; place-items: center;
  width: 26px; height: 26px; padding: 0;
  border-radius: 50%; border: 1px solid rgba(180, 105, 14, .35);
  background: none; color: #8a5a10; cursor: pointer;
}
.pron-say svg { width: 14px; height: 14px; }
.pron-say:hover { background: rgba(180, 105, 14, .14); }

.pron-card__how {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  opacity: .9;
}

.pron-ipa {
  font-weight: 700;
  font-size: 15px;
  /* IPA needs a face that actually has the glyphs; the platform's UI font
     covers the common ones but not the whole block. */
  font-family: "Doulos SIL", "Charis SIL", "Gentium Plus", "Segoe UI", serif;
}
.pron-ipa.is-heard { color: #b4690e; }
.pron-ipa.is-target { color: #0a7a47; }

.pron-missing {
  margin: 10px 0 0;
  font-size: 13px;
  opacity: .75;
}
.pron-missing__word { font-weight: 600; }

.pron-note {
  margin: 10px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  opacity: .7;
}