/* owner: Phase 2 (Doc hieu) */
/* furigana: keep the space, only fade (E10) */
.rtext.nofuri rt, .rtitle.nofuri rt, #qs.nofuri rt { display: revert; opacity: 0; }
.rtext rt, .rtitle rt, #qs rt { user-select: none; -webkit-user-select: none; }
html[data-fx="on"] .rtext rt, html[data-fx="on"] .rtitle rt, html[data-fx="on"] #qs rt { transition: opacity 150ms linear; }
.rtext.nofuri ruby.peek rt { opacity: 1; }
.rtext { line-break: strict; overflow-wrap: anywhere; }
@media (min-width: 900px) { .rtext { font-size: 1.35rem; } }
.rhead { display: flex; justify-content: space-between; gap: .5rem; align-items: flex-start; }
.rtext .tk.sel { background: var(--accent-soft); box-shadow: 0 2px 0 var(--accent); }
.why { min-height: 1.4em; }
#score { position: relative; min-height: 64px; }
#score .fb { margin-right: 76px; }

/* word bar (E9) */
.wordbar { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--nav-h) + var(--safe-b) + 8px); width: min(560px, calc(100% - 16px)); max-height: 45vh; overflow-y: auto; z-index: 15; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.18); padding: .7rem .9rem; }
.wordbar[hidden] { display: none; }
.wb-act { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-top: .5rem; }
.wb-x { width: 44px; height: 44px; font-size: 1.5rem; line-height: 1; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); cursor: pointer; }
.wb-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wb-k { margin: .25rem 0; }
@keyframes wb-pop { from { opacity: 0; transform: translateY(12px); } }
html[data-fx="on"] .wordbar-in.wb-pop { animation: wb-pop 160ms var(--e-out); }

/* list: "Nên đọc tiếp" + level groups */
.rd-next { display: flex; flex-direction: column; gap: .5rem; border-color: var(--accent); }
.rd-eyebrow { font-size: .8rem; font-weight: 700; letter-spacing: .04em; color: var(--accent); }
.rd-nt { display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-size: 1.15rem; }
.rd-next .cta { margin-top: .3rem; }
.rd-reread { margin-bottom: .8rem; }
.rd-groups { display: flex; flex-direction: column; gap: .6rem; }
.rd-grp > summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; padding: 0 .2rem; }
.rd-grp > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.rd-grp[open] > summary { margin-bottom: .3rem; }

/* reader: first-time tip, end-of-passage card, quiet skip button */
.rd-tip { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin: .6rem 0; padding: .5rem .7rem; border-radius: 10px; background: var(--accent-soft); color: var(--ink); }
.rd-tip .btn { flex: none; min-height: 44px; }
.rd-end { display: flex; flex-direction: column; gap: .6rem; margin-top: .8rem; clear: both; }
.rd-skip { background: transparent; border-color: transparent; color: var(--muted); }
.rd-skip:hover:not(:disabled) { color: var(--accent); }
.rd-skip:disabled { opacity: .7; }
@media (min-width: 900px) { .rd-end { max-width: 420px; } }
.rd-groups .b-row, .rd-reread { text-decoration: none; color: inherit; }

/* Questions: leading speaker chip + optional Vietnamese translation */
.qrow .qtext { margin-bottom: 0; }
html:not([data-tts="off"]) .qrow.has-say { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: start; }
html:not([data-tts="off"]) .qrow.has-say > .tts-btn { margin-top: calc((var(--say-ln) - 34px) / 2); }
.qtools { margin: .3rem 0 .1rem; }
.qtr { font: inherit; font-size: .82rem; min-height: 32px; padding: 0 .75rem; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--muted); cursor: pointer; }
.qtr[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.qtr:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.qvi { margin: .15rem 0 .5rem; font-size: .9rem; color: var(--muted); }
.qvi[hidden], .opt .ovi[hidden] { display: none; }
.opt .ovi { display: block; margin-top: .2rem; font-family: inherit; font-size: .84rem; color: var(--muted); }