/* Interlinear annotated-English ({en:…}) styling — the MIRROR of 25-annotate-zh.css, for
   English-learning content aimed at Chinese speakers (the /know English-grammar references and the
   /learn English lessons). The English word stays VISIBLE (it is the target language); its Chinese
   gloss (+ optional IPA) sit in a row RESERVED ABOVE the word via `visibility` (not `display`, so
   revealing shifts nothing) and are shown ONE WORD AT A TIME on hover / tap / keyboard walking,
   driven by the shared engine web/static/js/annotate-reveal.js. The italic full-sentence Chinese
   translation authored beneath an example is NOT rendered at all — reveal is word-by-word only
   (user 2026-07-16). Page-scoped plain CSS — NOT in app.bundle.css (mirrors
   25-annotate-zh.css / 20-simulate.css), so no Tailwind/bundle rebuild. Markup: web/en_annotate.py. */

.lx-en { cursor: default; }
.lx-en:focus { outline: none; }
.lx-en-w {
  position: relative; display: inline-block; text-align: center; vertical-align: bottom;
  padding: 0.05rem 0.05em 0; border-radius: 0.3rem;   /* top pad → hover box extends above the word */
}
.lx-en-w.is-open { background: rgba(103, 232, 249, 0.12); }
@media (hover: hover) { .lx-en-w:hover { background: rgba(103, 232, 249, 0.12); } }
.lx-en-t { display: block; color: #eef2f7; }          /* the visible English word */
.lx-en-x { color: #cbd5e1; }                          /* punctuation / un-glossed run (inline) */
/* the gloss row — IPA (smaller, muted) then Chinese (cyan); ONE reserved line above the word,
   hidden until reveal so the layout never shifts and copy never picks it up. */
.lx-en-gloss {
  display: block; visibility: hidden; line-height: 1.15; margin-bottom: 0.25rem;
  white-space: nowrap; -webkit-user-select: none; user-select: none;
}
.lx-en-ipa { color: #93a4b8; font-size: 0.7rem; margin-right: 0.25em; }
.lx-en-zh { color: #67e8f9; font-size: 0.82rem; font-weight: 600; }
/* Reveal — EXACTLY ONE word at a time. `.is-open` is set by the shared engine
   (web/static/js/annotate-reveal.js) for tap/click AND keyboard walking (Tab onto the sentence,
   then ←/→). There is deliberately NO `.lx-en:focus` rule: a touch tap focuses the sentence too
   (.lx-en carries tabindex=0), so a focus-based reveal showed EVERY word's gloss at once on a
   phone — and, since nothing used to set .is-open here, that blanket reveal was the only thing a
   tap did. Mirrors the .lx-zh fix in 25-annotate-zh.css (bug 2026-07-16). */
.lx-en-w.is-open .lx-en-gloss { visibility: visible; }
/* Mouse hover, pointer devices ONLY — on touch, :hover sticks to the tapped word. */
@media (hover: hover) { .lx-en-w:hover .lx-en-gloss { visibility: visible; } }

/* Each example: the {en} sentence in its own paragraph, with an italic Chinese translation
   authored in the paragraph right beneath it (`*…*` after a blank line). The translation is
   NOT rendered — reveal is word-by-word ONLY (user 2026-07-16: "in general we should only reveal
   word by word"); a whole-sentence translation spoils the read-it-yourself practice. Mirrors the
   {zh} side in 25-annotate-zh.css. It stays in the authored markdown, which the PDFs still use. */
.code-prose p:has(> .lx-en), .learn-content-body p:has(> .lx-en) { margin: 0.6rem 0; }
.code-prose p:has(> .lx-en) + p, .learn-content-body p:has(> .lx-en) + p { display: none; }