/* Site overrides kept separate from the vendored mandarin_html styles. */
.reading-controls { display: flex; flex-wrap: wrap; gap: .6rem; }
.sentence-audio { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .4rem; font: .8rem/1.4 system-ui, sans-serif; }
.sentence-audio[hidden] { display: none; }
.sentence-play { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: .3rem .6rem; font-size: .8rem; }
.hide-pinyin .word::before { display: none; }
.sentence { margin: 1.6rem 0; padding: 0; font-size: 1.8rem; line-height: 2.6; }
.word { width: auto; margin-inline: .08em; font: inherit; font-family: "Noto Sans CJK SC", "Microsoft YaHei", sans-serif; }
.word::before { content: attr(data-pinyin); display: block; color: #59675e; font: .85rem/1.5 system-ui, sans-serif; text-align: center; }
.word-translation { bottom: 100%; min-width: 0; width: max-content; max-width: min(15rem, 70vw); white-space: normal; background: #243c35; color: #fff; padding: .35rem .6rem; font: .85rem/1.5 system-ui, sans-serif; }
.word:focus .word-translation { display: block; }
.sentence-translation { position: static; margin-top: .6rem; padding: 0; color: #59675e; background: transparent; font: 1rem/1.6 system-ui, sans-serif; }
.sentence:focus-within .sentence-translation, .show-translations .sentence-translation { display: block; }
.sentence-annotation { position: static; font-size: .9rem; }
.featured-word { margin: 1rem 0; font-size: 5rem; line-height: 1.5; }
.featured-word .word::before { font-size: 1.2rem; }
.vocabulary-table { width: 100%; margin-top: 1.5rem; border-collapse: collapse; font-size: .85rem; }
.vocabulary-table th, .vocabulary-table td { padding: .4rem .6rem; border-bottom: 1px solid #dcded3; text-align: left; vertical-align: top; }
.vocabulary-table th { width: 10rem; color: var(--muted); font-weight: 400; }
.vocabulary-table .word { font-size: 1rem; }
/* Meaning and sentence translations remain available without JavaScript. */
body:not(.reading-ready) .sentence::after { content: attr(data-translation); display: block; font: 1rem/1.6 system-ui, sans-serif; }
body:not(.reading-ready) .word:hover::after { content: attr(data-translation); display: block; font: .85rem/1.5 system-ui, sans-serif; }
@media print { .sentence-translation { display: block; } .reading-controls, .sentence-audio, #audio-notice { display: none; } }