/* Interlinear annotated-Chinese ({zh:…}) styling for the /know READING references
   (web/templates/know/reference.html — the programming + HSK-grammar refs). This now MATCHES
   the /learn lesson behaviour (17-learn.css): the per-word English gloss AND the ruby pinyin
   are hidden until per-word hover / tap / keyboard-focus, with both rows kept RESERVED via
   `visibility` (not `display`) so revealing shifts nothing. The italic full-sentence translation
   authored beneath each example stays visible (a reference is for reading).

   Markup (web/zh_annotate.py): .lx-zh wraps the sentence (tabindex=0 → keyboard reveal); each
   .lx-w stacks an English gloss (.lx-w-en) over ruby pinyin (<rt>, tone-coloured .lx-tN) over
   the 汉字; a bare segment is punctuation (.lx-w-x). Touch tap-toggle (.is-open) is wired in the
   reference.html inline script. Page-scoped plain CSS — NOT in app.bundle.css, so no Tailwind/
   bundle rebuild (mirrors 20-simulate.css / 18-vocab.css). */

/* Per-syllable Mandarin tone colours: 1 high · 2 rising · 3 dip · 4 falling · 0 neutral. */
.lx-t1 { color: #f87171; } .lx-t2 { color: #fbbf24; } .lx-t3 { color: #34d399; }
.lx-t4 { color: #60a5fa; } .lx-t0 { color: #94a3b8; }

.lx-zh { cursor: default; }
.lx-zh:focus { outline: none; }
.lx-w {
  position: relative; display: inline-block; text-align: center; vertical-align: bottom;
  padding: 1.2rem 0.06em 0; border-radius: 0.3rem;   /* top pad reserves the absolute English row's HEIGHT (not width → no inter-word gaps) */
}
/* On hover/tap, a SUBTLE 1px ring (no fill) around the word — ties its pinyin + English to this
   汉字. box-shadow → no layout shift; follows the .lx-w border-radius. (user steer 2026-06-19) */
.lx-w:hover, .lx-w.is-open { box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.4); }
.lx-w ruby { font-size: 1.5rem; line-height: 1.5; color: #eef2f7; }       /* readable hanzi */
.lx-w rt { font-size: 0.5em; font-weight: 600; line-height: 1.1; padding-bottom: 0.3em; visibility: hidden; }  /* pinyin row RESERVED, revealed on hover; padding-bottom = a little gap above the 汉字 */
.lx-w-x { color: #cbd5e1; font-size: 1.5rem; vertical-align: bottom; padding: 0 0.05em; }   /* punctuation between words, sized + aligned to the hanzi */
.lx-w-en {   /* plain English above the pinyin. ABSOLUTELY positioned + centred so its width (often
                far wider than the 汉字) never stretches the word → no big gaps between words; its
                HEIGHT is reserved by .lx-w's padding-top, so revealing it still shifts nothing.
                A SOLID deep-blue box keeps it fully readable where it overlaps the line above. */
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  display: block; text-align: center; line-height: 1.2;
  white-space: nowrap; visibility: hidden; font-size: 0.64rem; color: #c4d0e6;
  background: #172546; border: 1px solid rgba(96, 165, 250, 0.4);
  border-radius: 0.3rem; padding: 0.08rem 0.4rem; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.6);
}
/* reveal: pinyin + English per word on hover / tap (.is-open), and ALL words on keyboard focus of the sentence */
.lx-w:hover rt, .lx-w.is-open rt, .lx-zh:focus rt { visibility: visible; }
.lx-w:hover .lx-w-en, .lx-w.is-open .lx-w-en, .lx-zh:focus .lx-w-en { visibility: visible; }
/* Copy yields ONLY the 汉字 — pinyin (rt) + English gloss never enter the selection, so
   copying an annotated sentence gives clean Chinese. Hanzi + punctuation stay selectable. */
.lx-w rt, .lx-w-en { -webkit-user-select: none; user-select: none; }

/* Each example: the {zh} sentence in its own paragraph, an italic English 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-zh), .learn-content-body p:has(> .lx-zh) { margin: 0.6rem 0 0; }
.code-prose p:has(> .lx-zh) + p, .learn-content-body p:has(> .lx-zh) + p {
  margin: 0.05rem 0 0.6rem; color: #aeb9c7; font-size: 0.92rem;
  opacity: 0; transition: opacity 0.12s ease;
}
/* reveal on hover / keyboard-focus of the example sentence, on touch-tap of any of its words
   (.is-open), or when hovering the translation line itself (so you can move down to read it) */
.code-prose p:has(> .lx-zh:hover) + p,
.code-prose p:has(> .lx-zh:focus) + p,
.code-prose p:has(> .lx-zh .lx-w.is-open) + p,
.code-prose p:has(> .lx-zh) + p:hover,
.learn-content-body p:has(> .lx-zh:hover) + p,
.learn-content-body p:has(> .lx-zh:focus) + p,
.learn-content-body p:has(> .lx-zh .lx-w.is-open) + p,
.learn-content-body p:has(> .lx-zh) + p:hover { opacity: 1; }

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