/* The stage: an invisible input over a colorizing mirror on a bare baseline.
   The input's own text is transparent (the caret stays); whatever the mirror
   paints in the same metrics shows through, so annotations light up in place
   as you type. Shared by facts/sentence and the quantity study cards; each
   context sets its own font size and token colors on top. Demoed in the
   styleguide. */

.stage {
  position: relative;
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.01em;
  border-bottom: 2px solid var(--line);
  padding-bottom: 0.5rem;
  transition: border-color 0.2s;
}

.stage:focus-within {
  border-color: var(--accent);
}

.stage--trouble,
.stage--trouble:focus-within {
  border-color: var(--rose);
}

.stage-mirror,
.stage-input {
  font: inherit;
  letter-spacing: inherit;
  white-space: pre;
  width: 100%;
  border: none;
  background: none;
  padding: 0;
}

.stage-mirror {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  color: var(--bs-body-color);
}

.stage-input {
  position: relative;
  color: transparent;
  caret-color: var(--bs-body-color);
}

.stage-input:focus {
  outline: none;
  box-shadow: none;
}

.stage-input::placeholder {
  color: var(--bs-tertiary-color);
}

.stage-input::selection {
  background: color-mix(in srgb, var(--accent) 30%, transparent);
  color: transparent;
}

/* Mirror vocabulary: washed tokens for recognized parts, ghost text for
   what the app adds alongside the learner's own words. */
.stage-tok {
  border-radius: 0.3em 0.3em 0 0;
}

.stage-tok--unit {
  color: var(--gold);
  background: var(--gold-wash);
}

.stage-tok--bad {
  color: var(--rose);
  background: var(--rose-wash);
}

.stage-ghost {
  color: var(--bs-tertiary-color);
  font-weight: 500;
}

/* The reading under the baseline: reserved space for a quiet confirmation
   or a gentle error, so the card never jumps. */
.stage-reading {
  min-height: 1.35rem;
  margin-top: 0.4rem;
  font-family: var(--bs-body-font-family, system-ui);
  font-weight: 400;
  letter-spacing: normal;
  font-size: 0.875rem;
  color: var(--muted);
}

.stage-reading--trouble {
  color: var(--rose);
}