/* ===================== 閱讀 Reading (#page-reading, js/reading.js) =====================
   The list and the result screens reuse the grammar page's classes (css/grammar.css);
   this file adds the reader (furigana, tappable sentences and words, the word card),
   the question panel beside the text (○ / × too) and the timer / text size tools. */

.reading-card { text-align: left; }
.reading-card h3 { text-align: center; }

/* list */
.rd-topic {
    display: inline-block;
    font-size: 0.75rem;
    padding: 1px 8px;
    margin-right: 6px;
    border-radius: 99px;
    background: var(--track);
    color: var(--text-secondary);
}
.rd-meta { font-size: 0.75rem; color: var(--text-muted); margin-left: 4px; white-space: nowrap; }

/* reader head and tools */
.rd-head { text-align: center; margin: 4px 0 12px; }
.rd-title { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 700; line-height: 1.9; }
.rd-title-sm { font-size: 1.15rem; }
.rd-sub { color: var(--text-secondary); font-size: 0.9rem; }
.rd-tools { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; margin-bottom: 16px; }
.rd-tools .mode-btn { width: auto; min-width: 0; flex: none; margin: 0; padding: 6px 12px; font-size: 0.85rem; }
.rd-font { display: inline-flex; gap: 6px; }
.rd-font .mode-btn { min-width: 44px; }
.rd-font .mode-btn:disabled { opacity: 0.45; cursor: default; }
.rd-timer { font-size: 0.85rem; color: var(--text-muted); font-variant-numeric: tabular-nums; padding: 0 4px; }

/* the text */
.rd-text {
    line-height: 2.45;
    padding: 14px 16px;
    border: 2px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
}
.rd-text p { margin: 0 0 4px; }
/* the tall lines leave room for furigana / pinyin; other languages need less */
.rd-text p[lang]:not([lang="ja"]):not([lang="zh"]) { line-height: 1.95; }
.rd-para + .rd-para { margin-top: 6px; }
.rd-s { cursor: pointer; border-radius: 6px; transition: background 0.15s; }
.rd-s:hover { background: var(--track); }
.rd-s.playing { background: color-mix(in srgb, var(--primary) 18%, transparent); }
.rd-w { border-bottom: 2px dotted var(--primary); cursor: help; }
.rd-w:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 3px; }
/* keep a kanji word together when its furigana is wider (食堂 / しょくどう) */
.reading-card ruby { ruby-align: center; }
.reading-card rt { font-size: 0.46em; color: var(--text-secondary); }
.no-furi rt { visibility: hidden; }
/* Chinese: one column per character, pinyin above and zhuyin below (js/reading.js
   readingSegsHtml); #reading-card[data-zhrd] says which rows show. Every column
   has all three rows, so punctuation and characters line up. */
.zc { display: inline-grid; grid-template-columns: auto; justify-items: center; vertical-align: bottom; line-height: 1.5; margin-top: 0.35em; }
.zc .py { grid-row: 1; } .zc .ch { grid-row: 2; } .zc .zy { grid-row: 3; }
.zc .py, .zc .ch, .zc .zy { grid-column: 2; }
.zc .pu { grid-row: 2; grid-column: 3; line-height: 1.45; }
.zc .pu.pre { grid-column: 1; }
.zc .py, .zc .zy { font-size: 0.52em; line-height: 1.35; height: 1.35em; color: var(--text-secondary); white-space: nowrap; padding: 0 1px; }
.zc .zy { font-size: 0.48em; letter-spacing: -0.04em; }
.zc .ch { line-height: 1.45; }
.rd-w .zc .ch { border-bottom: 2px dotted var(--primary); }
.rd-w:has(.zc) { border-bottom: 0; }
#reading-card[data-zhrd="pinyin"] .zc .zy,
#reading-card[data-zhrd="zhuyin"] .zc .py,
#reading-card[data-zhrd="off"] .zc .py,
#reading-card[data-zhrd="off"] .zc .zy { display: none; }
.rd-text:has(.zc) { line-height: 1.6; }
.rd-seg { display: inline-flex; gap: 4px; }
.rdx-tools .rd-seg { flex-wrap: wrap; max-width: 100%; }   /* never past the card's edge */
.rdx-py-off rt { display: none; }   /* HSK 1–2 with 全部顯示拼音 / 注音 turned off (js/reading-exam.js) */
.rd-seg-label { align-self: center; font-size: 0.9rem; }
.rd-tr {
    font-size: 0.88rem;
    line-height: 1.7;
    color: var(--text-secondary);
    margin: 0 0 10px;
    padding-left: 10px;
    border-left: 3px solid var(--line);
}
.rd-help { font-size: 0.8rem; color: var(--text-muted); margin: 8px 0 0; text-align: center; }

/* glossary */
.rd-gloss { margin: 18px 0 14px; }
.rd-gloss ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px 12px; }
.rd-gloss-item {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 4px 6px;
    border-radius: 8px;
    font: inherit;
    color: inherit;
    cursor: pointer;
}
.rd-gloss-item:hover { background: var(--track); }
.rd-gloss-item b { font-family: var(--font-serif); }
.rd-gloss-item span { color: var(--text-secondary); font-size: 0.88rem; }

/* word card */
.rd-pop {
    position: fixed;
    z-index: 900;
    display: none;
    padding: 12px 14px;
    border: 2px solid var(--edge);
    border-radius: 12px;
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 4px 0 var(--edge);
}
.rd-pop-head b { font-family: var(--font-serif); font-size: 1.25rem; }
.rd-pop-r { margin-left: 8px; color: var(--text-secondary); }
.rd-pop-m { margin: 6px 0 10px; line-height: 1.6; }
.rd-pop-en { display: block; font-size: 0.8rem; color: var(--text-muted); }
.rd-pop-acts { display: flex; gap: 8px; }
.rd-pop-acts .back-btn { width: auto; margin: 0; padding: 6px 12px; font-size: 0.85rem; }

/* quiz */
.rd-peek { margin: 0 0 14px; }
.rd-peek summary { cursor: pointer; color: var(--primary); font-size: 0.9rem; margin-bottom: 8px; }
.rd-peek .rd-text { font-size: 1rem; }
.rd-part { margin: 18px 0 8px; }
.rd-q { margin: 0 0 18px; }
.rd-q h4 { font-size: 1.08rem; font-weight: 600; line-height: 2.1; margin: 0 0 6px; }
.rd-qn { color: var(--primary); font-weight: 700; margin-right: 2px; }
.rd-opts { display: grid; gap: 8px; }
.rd-opts .option-btn { width: 100%; margin: 0; text-align: left; line-height: 2; }
.rd-tf { display: flex; gap: 12px; }
.rd-tf .rd-tf-btn { flex: 1; margin: 0; font-size: 1.6rem; font-weight: 700; padding: 6px 0; }
.rd-why {
    margin: 8px 0 0;
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--track);
    font-size: 0.88rem;
    line-height: 1.7;
}

/* result + glossary review */
.rd-result { text-align: center; margin: 24px 0 0; padding-top: 18px; border-top: 2px dashed var(--line); }
.rd-result .grammar-result-btns { display: grid; gap: 10px; max-width: 420px; margin: 14px auto 0; }
.rd-speed { color: var(--text-secondary); font-size: 0.9rem; }
.rd-review-word { font-family: var(--font-serif); font-size: 2.2rem; font-weight: 700; margin: 6px 0; }

.rd-top-nav { display: none; }

/* the side panel (js/reading.js readingPanelHtml): 題目 / 生詞 tabs, the questions
   READING_Q_PAGE a page, 上一頁 / 下一頁 */
.rd-col-side { margin-top: 18px; }
.rd-tabs { display: flex; gap: 6px; margin-bottom: 12px; border-bottom: 2px solid var(--line); }
.rd-tab {
    flex: 1;
    padding: 9px 10px;
    margin-bottom: -2px;
    border: 0;
    border-bottom: 3px solid transparent;
    background: none;
    color: var(--text-secondary);
    font: inherit;
    font-weight: 700;
    font-size: 0.92rem;
    cursor: pointer;
}
.rd-tab small { font-weight: 500; color: var(--text-muted); }
.rd-tab.on { color: var(--primary); border-bottom-color: var(--primary); }
.rd-note { font-size: 0.85rem; color: var(--text-secondary); margin: 0 0 12px; }
.rd-link { border: 0; background: none; padding: 0; color: var(--primary); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.rd-col-side .rd-part:first-child { margin-top: 0; }
.rd-col-side .rd-gloss { margin: 0; }
.rd-pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.rd-pager .btn { width: auto; flex: 1; max-width: 160px; margin: 0; }
.rd-pager .btn:disabled { opacity: 0.4; cursor: default; }
.rd-pager span { font-size: 0.85rem; color: var(--text-secondary); white-space: nowrap; }
.rd-col-side .rd-result { margin: 0 0 18px; padding: 0 0 18px; border-top: 0; border-bottom: 2px dashed var(--line); }

/* computers: text left, the panel right (sticky, scrolling by itself) on a 1180px page */
@media (min-width: 1024px) {
    .rd-cols { display: grid; grid-template-columns: minmax(0, 1fr) 520px; gap: 24px; align-items: start; }
    .rd-col-side {
        position: sticky;
        top: 16px;
        margin-top: 0;
        max-height: calc(100vh - 32px);
        overflow-y: auto;
        padding-right: 4px;
    }
    .rd-col-side .rd-gloss ul { grid-template-columns: 1fr; }
    /* the text scrolls in its own box no taller than the screen, so the whole reader fits one
       1080p screen; the questions beside it come one at a time (big check, 2026-10-24) */
    .rd-col-main .rd-text { max-height: max(300px, calc(100vh - 505px)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
    .rd-col-side { max-height: max(300px, calc(100vh - 426px)); }
    .rd-col-main .rd-tools { margin-top: 0; }
    .rd-hint { display: none; }                         /* the number tabs say it already */
    .rd-col-side .rd-opts .option-btn { font-size: 1rem; line-height: 1.85; padding: 10px 14px; }   /* long options in two lines, not three */
    .rd-bottom-nav { display: none; }                   /* 上一篇 / 下一篇 sit in the top row */
    .rd-top-nav { display: flex; gap: 8px; margin-left: 12px; }
    .rd-top-nav .mode-btn { padding: 6px 12px; font-size: 0.85rem; }
    .rd-qtabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
    .rd-qtab { min-width: 34px; height: 34px; padding: 0 8px; border: 2px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text-secondary); font: inherit; font-weight: 700; cursor: pointer; }
    .rd-qtab.on { border-color: var(--primary); color: var(--primary); }
    .rd-qtab.ok { background: var(--success-bg); border-color: var(--success); color: var(--success-text); }
    .rd-qtab.no { background: var(--danger-bg); border-color: var(--danger); color: var(--danger-text); }
    .rd-qtab.on.ok, .rd-qtab.on.no { outline: 2px solid var(--primary); outline-offset: 1px; }
}

/* Russian stress marks (U+0301): the CJK fonts the site uses place a combining mark
   on the next letter in Cyrillic, so Russian text uses a system font that stacks it */
.reading-card [lang="ru"] { font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; }

/* ===== exam-style rounds (js/reading-exam.js, TOPIK 2026-10-18) ===== */
.rdx-head { margin: 18px 0 8px; }
.rdx-clock { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.rdx-clock.low { color: var(--danger); }
.rdx-ask { display: flex; flex-direction: column; gap: 3px; margin: 10px 0 12px; padding: 10px 14px; border-left: 4px solid var(--primary); background: var(--surface-2); border-radius: 0 10px 10px 0; }
.rdx-ask > span[lang] { font-weight: 800; line-height: 1.6; }
.rdx-ask-tr { font-size: 0.82rem; color: var(--text-secondary); }
/* JLPT: the もんだい number above the instruction, and the furigana switch */
.rdx-mondai { align-self: flex-start; font-weight: 900; font-size: 0.9rem; padding: 1px 10px; border: 2px solid var(--ink); border-radius: 4px; background: var(--surface); }
.rdx-ab { display: inline-block; padding: 0 10px; border: 2px solid var(--ink); border-radius: 4px; font-weight: 900; line-height: 1.6; }
.rdx-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 10px; }
#reading-card .rdx-tools .mode-btn { flex: none; width: auto; margin: 0; padding: 6px 14px; font-size: 0.85rem; }
.rdx-text[lang="ja"], .rdx-notice[lang="ja"] { line-height: 2.2; }
/* N3 and up are written without spaces: wrap anywhere, as Japanese does (keep-all kept whole runs) */
.rdx-flow .rdx-text, .rdx-flow .rdx-opt, .rdx-flow .rdx-notice, .rdx-flow .rdx-qhead { word-break: normal; line-break: strict; }
.rdx-text rt, .rdx-notice rt, .rdx-opt rt, .rdx-qhead rt { font-size: 0.55em; color: var(--text-secondary); }
.rdx-item { margin-bottom: 16px; }
.rdx-item-label { display: flex; align-items: baseline; gap: 8px; margin: 0 0 6px 2px; font-size: 0.82rem; font-weight: 800; color: var(--text-secondary); }
.rdx-item-label .rdx-no { font-size: 1.05rem; }
.rdx-text { padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); font-size: 1.08rem; line-height: 1.95; word-break: keep-all; }
.rdx-text u { text-decoration-thickness: 2px; text-underline-offset: 4px; }
.rdx-blank { color: var(--primary); font-weight: 800; white-space: pre; }
.rdx-mark { color: var(--primary); }
.rdx-box { margin-bottom: 10px; padding: 10px 14px; border: 2px dashed var(--line); border-radius: 10px; line-height: 1.8; }
.rdx-headline { padding: 16px 18px; border-top: 3px double var(--ink); border-bottom: 3px double var(--ink); font-family: var(--font-serif); font-size: 1.2rem; font-weight: 800; text-align: center; line-height: 1.6; }
.rdx-parts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rdx-parts li { padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); line-height: 1.8; }
.rdx-notice { max-width: 440px; margin: 0 auto; padding: 16px 18px; border: 2px solid var(--ink); border-radius: 6px; background: var(--surface); box-shadow: 4px 4px 0 var(--line); line-height: 1.75; }
.rdx-notice-title { text-align: center; font-weight: 900; font-size: 1.12rem; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.rdx-notice dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0 0 6px; }
.rdx-notice dt { font-weight: 800; }
.rdx-notice dd { margin: 0; }
.rdx-notice p { margin: 0 0 4px; }
.rdx-notice-foot { margin-top: 8px; font-size: 0.92rem; color: var(--text-secondary); }
.rdx-chart { margin: 0 auto; max-width: 480px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.rdx-chart figcaption { text-align: center; font-weight: 800; margin-bottom: 10px; }
.rdx-bar { display: grid; grid-template-columns: 5.5em 1fr 3.5em; align-items: center; gap: 8px; margin: 6px 0; font-size: 0.92rem; }
.rdx-bar-track { height: 14px; border-radius: 7px; background: var(--track); overflow: hidden; }
.rdx-bar-track i { display: block; height: 100%; background: var(--primary); }
.rdx-bar-val { text-align: right; font-variant-numeric: tabular-nums; }
.rdx-tr { margin: -4px 0 12px; font-size: 0.9rem; color: var(--text-secondary); }
.rdx-tr summary { cursor: pointer; color: var(--primary); font-weight: 700; }
.rdx-tr p { margin: 6px 0 0; line-height: 1.7; }
.rdx-q { margin-bottom: 14px; }
.rdx-qhead { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; margin-bottom: 8px; font-weight: 700; }
.rdx-qhead > span[lang] { flex: 1; min-width: 0; }   /* a long question wraps beside its number, not under it */
.rdx-no { font-weight: 900; color: var(--primary); }
.rdx-opts { display: grid; grid-template-columns: 1fr; gap: 8px; }
.rdx-opt { display: flex; align-items: flex-start; gap: 8px; text-align: left; line-height: 1.6; word-break: keep-all; overflow-wrap: anywhere; min-width: 0; }   /* a long option wraps instead of overflowing */
.rdx-opt-n { flex: none; font-weight: 800; }
.rdx-opt.rdx-picked { border-color: var(--primary); background: var(--primary-soft); }
.rdx-submit-row { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 12px; }
.rdx-submit-row .btn { margin: 0; }
/* HSK (2026-10-30): pinyin over the characters (ruby) needs taller lines; a picture of lettered
   panels, a bank of words or replies lettered A–F, and letter-only answer buttons */
.rdx-text[lang="zh"], .rdx-qhead [lang="zh"], .rdx-opt[lang="zh"], .rdx-bank { line-height: 2.4; }
.rdx-text[lang="zh"] rt, .rdx-qhead [lang="zh"] rt, .rdx-opt[lang="zh"] rt, .rdx-bank rt { font-family: var(--font-sans, inherit); font-size: 0.5em; }
.rdx-qhead > span[lang="zh"], .rdx-text[lang="zh"] { font-size: 1.3rem; font-weight: 600; }   /* the sentence to read, pinyin and all */
/* HSK is printed in Simplified: the TC fonts lack 为 选 适 …, so a Simplified font (only the pieces a page uses load) */
.rdx-cols [lang="zh"], .rdx-ask [lang="zh"], .rdx-bank { font-family: 'Noto Sans SC', var(--font-sans); }
.rdx-pic { position: relative; margin: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.rdx-pic img { display: block; width: 100%; height: auto; }
.rdx-pic-todo { display: grid; gap: 6px; padding: 8px; aspect-ratio: 3 / 2; background: var(--surface-2); }
.rdx-pic-todo span { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; padding: 6px;
    border: 1px dashed var(--line); border-radius: 8px; text-align: center; font-size: 0.9rem; color: var(--text-secondary); }
.rdx-pic-todo b { color: var(--ink); }
.rdx-pic-grid { position: absolute; inset: 0; display: grid; pointer-events: none; }
.rdx-pic-grid span { align-self: start; justify-self: start; margin: 6px; min-width: 26px; padding: 1px 7px; border: 2px solid var(--ink); border-radius: 6px;
    background: var(--surface); color: var(--ink); font-weight: 900; text-align: center; }
.rdx-bank { margin: 0; padding: 12px 16px; list-style: none; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); font-size: 1.08rem; }
.rdx-bank li { display: flex; align-items: baseline; gap: 10px; }
.rdx-bank b { flex: none; color: var(--primary); }
.rdx-bank.rdx-bank-words { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 12px; }
/* HSK 4–6: a passage's numbered blanks (the one on screen marked), its bank of sentences below,
   paragraphs to put in order */
.rdx-blank-n { padding: 0 2px; border-radius: 6px; }
.rdx-blank-n.now { background: var(--primary-soft); }
.rdx-bank.rdx-bank-sents { margin-top: 12px; line-height: 2; }
.rdx-bank.rdx-bank-paras { line-height: 2; }
.rdx-bank.rdx-bank-paras li + li { margin-top: 8px; }
.rdx-opts.rdx-opts-letters, .rdx-opts.rdx-opts-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rdx-opt.rdx-opt-letter { justify-content: center; font-size: 1.1rem; }
/* HSK 7–9 written answers (zh_short): a box of at most 10 characters and 送出 beside it */
.rdx-short { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.rdx-short-in { flex: 1 1 220px; min-width: 0; min-height: 48px; padding: 10px 14px; border: 2px solid var(--line); border-radius: 12px;
    background: var(--surface); color: var(--ink); font: inherit; font-size: 1.15rem; }
.rdx-short-in:focus { outline: none; border-color: var(--primary); }
.rdx-short-in:disabled { background: var(--surface-2); color: var(--ink); opacity: 1; }
.rdx-short .rdx-short-go { margin: 0; min-width: 96px; }
.rdx-self { margin: 6px 0 0; }
.rdx-self .mode-btn { font-size: .9rem; }
@media (min-width: 769px) {
    .rdx-opts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .rdx-opts.rdx-opts-letters, .rdx-opts.rdx-opts-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* computers: the text left, its questions right (the page is 1180px wide, body.reading-wide) */
@media (min-width: 1024px) {
    /* the text gets the wider column: the questions beside it are one at a time (2026-10-24) */
    .rdx-cols { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; align-items: start; }
    /* a long text scrolls in its own box, so the questions beside it stay in view (2026-10-24) */
    .rdx-col-text { position: sticky; top: 16px; max-height: max(420px, calc(100vh - 560px)); overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; scrollbar-width: thin; }
    .rdx-col-q .rdx-opts { grid-template-columns: 1fr; }
    .rdx-col-q .rdx-opts.rdx-opts-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);   /* even columns: keep-all text never widens one past the card */ }
    .rdx-col-q .rdx-opts.rdx-opts-letters, .rdx-col-q .rdx-opts.rdx-opts-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .rdx-q-off { display: none; }
    .rdx-col-text .rdx-notice[lang="ja"] { max-width: none; }   /* JLPT information pages: the whole column, so less to scroll */
    .rdx-subtabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }   /* long passages (10+ questions) wrap, never past the card */
    .rdx-sub-next { display: flex; justify-content: flex-end; margin: 10px 0 0; }
    .rdx-sub-next .btn { margin: 0; }
    /* answered: 答對了 / 答案是 left, 下一小題 right, in one row (2026-11-08) */
    .rdx-fb-row { display: flex; align-items: center; gap: 12px; margin: 28px 0 12px; }
    .rdx-fb-row .grammar-feedback { flex: 1; margin: 0; text-align: left; }
    .rdx-fb-row .rdx-sub-next { margin: 0; }
    /* 上一題 / 下一題 in the top row, 交卷 under the questions, smaller options and instruction
       (big check 2026-10-24: every JLPT / TOPIK question fits one 1080p screen) */
    .rdx-top-nav .btn { width: auto; min-width: 0; margin: 0; padding: 6px 14px; font-size: 0.85rem; }
    .rdx-submit-bottom, .rdx-mock-row { display: none; }
    .rdx-submit-top { display: inline-flex; align-items: center; gap: 8px; margin: 0 6px 0 0; }
    .rdx-mock-top { margin: 0 0 0 auto; }
    .rdx-top-nav { align-items: center; }
    .rdx-ask { margin: 8px 0 10px; padding: 8px 12px; gap: 1px; }
    .rdx-ask > span[lang] { line-height: 1.5; }
    .rdx-col-q .rdx-opt { padding: 9px 14px; line-height: 1.5; }
    .rdx-col-q .rdx-opts { gap: 7px; }
    .rdx-col-q .rdx-q { margin-bottom: 0; }
    .rdx-col-q .rdx-tools { margin-bottom: 8px; }
    .rdx-col-q .rdx-subtabs { margin-bottom: 10px; }
}
/* a mouse: ten number tabs on one row (2026-11-07 — ru_c1's 10-question essay wrapped them to two rows,
   87px, and a German / French / Japanese explanation then pushed the answered card past 940px) */
@media (min-width: 1024px) and (pointer: fine) {
    .rdx-col-q .rdx-subtabs { gap: 4px; }
    .rdx-col-q .rdx-subtab { min-width: 38px; padding: 5px 7px; }
}
@media (max-width: 1023.98px) {
    .rdx-subtabs, .rdx-sub-next, .rdx-mock-top { display: none; }
}
.rdx-subtab { min-width: 44px; padding: 6px 12px; border: 2px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; font-weight: 800; cursor: pointer; }
.rdx-subtab.now { border-color: var(--primary); color: var(--primary); }
.rdx-subtab.ok { background: var(--success-soft, var(--surface-2)); border-color: var(--success, #3b8a5a); }
.rdx-subtab.no { background: var(--danger-soft, var(--surface-2)); border-color: var(--danger, #c0392b); }
.rdx-subtab.done { background: var(--surface-2); }
.rdx-subtab.now.ok, .rdx-subtab.now.no, .rdx-subtab.now.done { box-shadow: 0 0 0 2px var(--primary); }
.rd-half { font-size: 0.78rem; font-weight: 700; color: var(--primary); white-space: nowrap; }
/* 上一篇 / 下一篇 (and an exam round's 上一題 / 下一題): well apart from the questions' own
   上一頁 / 下一頁 above, so the two rows aren't tapped by mistake (phones, 2026-10-22) */
#reading-card > .grammar-nav { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--line); }

/* the HSK Taiwan edition (2026-10-30): Traditional in the TC font, and pinyin / zhuyin in one <rt>
   (js/reading-exam.js zhRt) shown by the card's data-zhrd — on 閱讀 and 聽解 alike */
.zh-tw .rdx-cols [lang="zh"], .zh-tw .rdx-ask [lang="zh"], .zh-tw .rdx-bank,
.zh-tw .ls-zh-opts [lang="zh"], .zh-tw .ls-qtext[lang="zh"], .zh-tw .ls-ja[lang="zh"] { font-family: var(--font-sans); }
[data-zhrd="pinyin"] .rt-zy, [data-zhrd="zhuyin"] .rt-py,
[data-zhrd="off"] .rt-py, [data-zhrd="off"] .rt-zy { display: none; }
.rt-zy { letter-spacing: -0.04em; }
.learn-edition { margin: 0 0 10px; }
/* the Chinese reading list (大陸版 / 台灣版 row + 8 passages + 4 rounds = three rows) ended 5px below a 1080p
   window (945px, 2026-11-08): a tighter credit line on computers */
@media (min-width: 1024px) {
    #page-reading .grammar-credit { margin-top: 8px; }
}