/* Pinyin over Chinese characters in the reader (reader/_pinyin_control, PinyinDisplay): each word a <ruby>, its
   syllables in <rt>. The text's classes choose: reader--py-all (every word), reader--py-new (the words the student
   doesn't know: not .is-known), reader--py-off; reader--tones colors each syllable by its tone (t1–t4, t0 neutral). */
[data-pinyin-root] ruby { ruby-position: over; ruby-align: center; }
[data-pinyin-root] rt { font-family: var(--font-sans); font-size: .42em; line-height: 1.1; letter-spacing: 0; color: var(--text-muted); user-select: none; }
[data-pinyin-root].reader--py-off rt,
[data-pinyin-root].reader--py-new .reader__w.is-known rt,
[data-pinyin-root].reader--py-new .reader__word.is-known rt { visibility: hidden; }
/* Graded texts: one button per word, side by side with no space between (Chinese has none). */
.reader [data-pinyin-root] .reader__ar { gap: 4px 0; align-items: flex-end; line-height: 1.9; } /* over .reader--ltr's */
[data-pinyin-root] .reader__word { margin: 0; padding: 0 1px; }
/* Room for the pinyin above each line. */
[data-pinyin-root]:not(.reader--py-off) { line-height: 2.4; }
[data-pinyin-root] .reader__w { margin: 0; padding: 0 .02em; }

/* Tone colors (a common convention: 1 red, 2 green, 3 blue, 4 purple, neutral gray). */
.reader--tones rt.t1, .reader__tones-dots .t1 { color: #C8312B; }
.reader--tones rt.t2, .reader__tones-dots .t2 { color: #2E8B3D; }
.reader--tones rt.t3, .reader__tones-dots .t3 { color: #2457C5; }
.reader--tones rt.t4, .reader__tones-dots .t4 { color: #8A3FB8; }
.reader--tones rt.t0 { color: var(--text-faint); }
.reader__pinyin { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.reader__pinyin-modes { display: inline-flex; align-items: center; gap: 2px; }
.reader__tones { display: inline-flex; align-items: center; gap: 6px; }
.reader__tones-dots { display: inline-flex; gap: 2px; }
.reader__tones-dots i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
/* The word panel's pinyin, under the word. */
.reader__entry-pinyin { margin: -4px 0 2px; font-size: 18px; color: var(--clay); }
.reader__entry-pinyin:empty { display: none; }

/* A Chinese word's pinyin beside it in lists and on cards (PinyinDisplay.reading). */
.today__preteach-py, .fc-card__pinyin { display: block; font-size: 14px; color: var(--clay); }
.fc-card__pinyin { font-size: 18px; margin-top: 2px; }
/* A language written with spaces between words (Persian): the romanization's words keep a space between them. */
.reader [data-pinyin-root]:not(:lang(zh)) .reader__ar { gap: 4px .34em; }
[data-pinyin-root]:not(:lang(zh)) .reader__w { margin-inline: .08em; }