/* 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 on per-word hover / tap-focus of the sentence / keyboard
   focus. The optional italic full-sentence Chinese translation authored beneath an example is hidden
   until the example is hovered/focused. 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:hover, .lx-en-w.is-open { 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: a word's gloss on hover / tap (.is-open), and ALL words on keyboard-focus of the sentence */
.lx-en-w:hover .lx-en-gloss, .lx-en-w.is-open .lx-en-gloss, .lx-en:focus .lx-en-gloss { visibility: visible; }

/* Each example: the {en} sentence in its own paragraph, an italic Chinese translation in the
   paragraph right beneath it (authored as `*…*` after a blank line). Like the per-word gloss, the
   translation is HIDDEN until you hover / tap / focus the example — kept in flow (opacity, not
   display) so the layout never shifts, and left in the a11y tree for screen readers. */
.code-prose p:has(> .lx-en), .learn-content-body p:has(> .lx-en) { margin: 0.6rem 0 0; }
.code-prose p:has(> .lx-en) + p, .learn-content-body p:has(> .lx-en) + p {
  margin: 0.05rem 0 0.6rem; color: #aeb9c7; font-size: 0.92rem;
  opacity: 0; transition: opacity 0.12s ease;
}
.code-prose p:has(> .lx-en:hover) + p,
.code-prose p:has(> .lx-en:focus) + p,
.code-prose p:has(> .lx-en .lx-en-w.is-open) + p,
.code-prose p:has(> .lx-en) + p:hover,
.learn-content-body p:has(> .lx-en:hover) + p,
.learn-content-body p:has(> .lx-en:focus) + p,
.learn-content-body p:has(> .lx-en .lx-en-w.is-open) + p,
.learn-content-body p:has(> .lx-en) + p:hover { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .code-prose p:has(> .lx-en) + p, .learn-content-body p:has(> .lx-en) + p { transition: none; }
}