/* Quiet Stanza — the writing cue: the line to copy, said word by word. */

.cue {
  --cue-sz: 72px;
  margin: 18px 0 6px;
  display: flex;
  align-items: stretch;
  gap: 10px;
}
.cue-body { flex: 1; min-width: 0; }
.cue-line {
  /* the cue is what you copy from, so it may carry the tracing guides.
     Size comes from the session (--cue-sz), fitted to the sitting's longest line. */
  font-family: var(--hand);
  font-weight: var(--ink-weight, 400);   /* the weight the page's ink is drawn in */
  font-size: var(--cue-sz);
  line-height: 1.55;
  color: var(--journal-ink, var(--ink));   /* the bottle on the page, not the UI navy */
  text-align: center;
  min-height: 1.55em;
  padding: 0 8px;
  white-space: pre-wrap;
}
.cue-guides .cue-line { font-family: var(--hand-guides); }
/* the date's raised ordinal ("15th"), as the page writes it, without opening up the line */
.cue-sup { font-size: .58em; line-height: 0; vertical-align: baseline; position: relative; top: -.62em; margin-left: .03em; }
.cue-word { transition: opacity .2s ease, color .12s ease; }
.cue-said { opacity: 1; }
.cue-coming { opacity: .28; }
.cue-word.lit { color: var(--wax); }
/* a soft yellow glow behind capitals — catches the eye for proper nouns and openings without
   boxing the letter in — and behind the silent characters, the commas, stops and quotes the
   voice never says. The padding lets the glow spill past the glyph and the negative margin
   gives the space back, so neighbouring letters don't move. */
.cue-cap,
.cue-punct {
  background: radial-gradient(ellipse 58% 46% at 50% 56%,
    color-mix(in srgb, var(--eco-yellow) 66%, transparent) 0%,
    color-mix(in srgb, var(--eco-yellow) 34%, transparent) 52%,
    transparent 100%);
  padding: 0 0.22em;
  margin: 0 -0.22em;
}
/* the ↵ after a line the writer leaves a blank row under (ReturnMark): in the UI face, smaller
   and quieter than the words, so it reads as an instruction and not as something to copy */
.cue-return {
  font-family: var(--ui);
  font-size: 0.62em;
  font-weight: 400;
  color: var(--eco-yellow-type);
  margin-left: 0.3em;
  vertical-align: 0.05em;
  user-select: none;
}
/* in the piece's small lines the cue's size would all but lose it */
.ws-piece-pick .cue-return { font-size: 0.85em; }