/* Memorisation mode (spec 2026-10-21-phase-4 §2). With html[data-hide] set by
   js/settings.js, each line not yet revealed hides its Chinese (with the pinyin) or its
   translation behind a placeholder bar, the button js/memo.js adds. The text keeps its box
   (visibility, not display), so the bar is the text's own size and the layout and
   the current-line marker do not move. Tokens only. */

.memo-ph { display: none; }
html.js[data-hide="zh"] article.chapter .line:not(.revealed) .zh,
html.js[data-hide="tr"] article.chapter .line:not(.revealed) .tr { position: relative; visibility: hidden; }
html.js[data-hide="zh"] article.chapter .line:not(.revealed) .zh > .memo-ph,
html.js[data-hide="tr"] article.chapter .line:not(.revealed) .tr > .memo-ph {
  display: block; position: absolute; inset: 0.25em 0; width: 100%; padding: 0; visibility: visible;
  border: 1px dashed var(--line); border-radius: 8px; background: var(--surface-2); cursor: pointer;
}
@media (hover: hover) {
  html.js[data-hide] article.chapter .line:not(.revealed) .memo-ph:hover { border-color: var(--text-muted); }
}
/* Reciting along: the bar of the line being recited carries the current-line colour. */
html.js[data-hide] article.chapter .line.active:not(.revealed) .memo-ph { border-style: solid; border-color: var(--red); background: var(--line-active); }

/* A revealed line keeps focus after its placeholder goes (js/memo.js). */
article.chapter .line:focus { outline: none; }
article.chapter .line:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Above the lines while something is hidden: the hint and "Reveal all". */
html.js[data-hide="zh"] .memo-bar, html.js[data-hide="tr"] .memo-bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
}
.memo-hint { margin: 0; color: var(--text-muted); font: var(--step--1)/1.4 var(--font-ui); }
.memo-all { flex: none; min-height: 2.25rem; padding: 0 var(--space-3); border: 1px solid var(--red); border-radius: 999px; background: transparent; color: var(--text); font: 600 var(--step--1) var(--font-ui); cursor: pointer; }