/* Chinese Reading — live news reader with hover pinyin + English (/eXam/reading).
   Page-scoped (linked from eXam/reading.html via {% block extra_head %}); plain CSS,
   so no Tailwind rebuild. Drives the picker → headlines → article flow (reading.js)
   and carries a self-contained copy of the HSK lesson's interlinear .lx-* hover
   styling (canonical source: web/static/css/17-learn.css) so the reader needs no
   dependency on the Learn page's stylesheet. */

.nr { max-width: 52rem; margin: 0 auto; }
.nr-hero { margin-bottom: 1.4rem; }
.nr-title { font-family: "Sora", system-ui, sans-serif; font-size: 1.6rem; font-weight: 700; color: #fff; margin: 0; }
.nr-sub { margin: .35rem 0 0; color: #94a3b8; font-size: .9rem; }

.nr-pane[hidden] { display: none; }

/* Progress bar — trickle while fetching, then determinate as images load. */
.nr-progress { height: 3px; border-radius: 2px; background: rgba(255,255,255,.08); overflow: hidden; margin: 0 0 1.1rem; }
.nr-progress[hidden] { display: none; }
.nr-progress-bar { height: 100%; width: 0; border-radius: 2px;
  background: linear-gradient(90deg, #38bdf8, #22d3ee); transition: width .25s ease, opacity .3s; }

/* ── source picker ── */
.nr-pick-label { font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #94a3b8; margin-bottom: .75rem; }
.nr-sites { display: grid; gap: .6rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .nr-sites { grid-template-columns: 1fr 1fr; } }
.nr-site { display: flex; align-items: center; gap: .8rem; width: 100%; text-align: left;
  padding: .85rem 1rem; border-radius: 1rem; cursor: pointer; color: #e2e8f0;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  transition: border-color .15s, background .15s, transform .08s; }
.nr-site:hover { border-color: rgba(56,189,248,.4); background: rgba(255,255,255,.05); }
.nr-site:active { transform: translateY(1px); }
.nr-site:focus-visible { outline: 2px solid rgba(56,189,248,.6); outline-offset: 2px; }
.nr-site-icon { display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; flex: none;
  border-radius: .6rem; color: rgb(var(--accent-rgb, 56,189,248)); background: rgba(var(--accent-rgb, 56,189,248), .14); }
.nr-site-icon svg { width: 1.25rem; height: 1.25rem; }
.nr-site-names { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.nr-site-zh { font-weight: 600; color: #fff; font-size: .95rem; }
.nr-site-en { font-size: .72rem; color: #94a3b8; }
.nr-chev { width: 1rem; height: 1rem; color: #64748b; flex: none; }

/* ── headlines / article shared bar ── */
.nr-bar { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.1rem; flex-wrap: wrap; }
.nr-bar-spacer { flex: 1; }
.nr-back, .nr-refresh, .nr-fs { display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .7rem;
  border-radius: .6rem; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04);
  color: #cbd5e1; font-size: .82rem; cursor: pointer; transition: background .15s, color .15s; }
.nr-back svg, .nr-refresh svg, .nr-fs svg { width: 1rem; height: 1rem; }
.nr-back:hover, .nr-refresh:hover, .nr-fs:hover { background: rgba(255,255,255,.08); color: #fff; }
.nr-fs { padding: .4rem .5rem; }                       /* icon-only → squarer */
.nr-fs-group { display: inline-flex; gap: .3rem; }     /* − / + read as one control */
.nr-fs:disabled { opacity: .35; cursor: default; background: rgba(255,255,255,.04); color: #cbd5e1; }
.nr-cur { font-weight: 600; color: #fff; }
.nr-updated { font-size: .72rem; color: #64748b; }
.nr-source { font-size: .82rem; color: #7dd3fc; text-decoration: none; }
.nr-source[hidden] { display: none; }
.nr-source:hover { text-decoration: underline; }

/* ── headlines list ── */
.nr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.nr-item { display: flex; gap: .8rem; align-items: flex-start; width: 100%; text-align: left; cursor: pointer;
  padding: .8rem .9rem; border-radius: .8rem; color: #e2e8f0;
  border: 1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.025);
  transition: border-color .15s, background .15s; }
.nr-item:hover { border-color: rgba(56,189,248,.35); background: rgba(255,255,255,.05); }
.nr-item:focus-visible { outline: 2px solid rgba(56,189,248,.6); outline-offset: 2px; }
.nr-item-thumb { width: 4.6rem; height: 3.2rem; flex: none; border-radius: .4rem; object-fit: cover; background: rgba(255,255,255,.05); }
.nr-item-body { min-width: 0; flex: 1; }
.nr-item-title { font-size: .95rem; line-height: 1.45; color: #f1f5f9; }
.nr-item-sum { margin-top: .2rem; font-size: .78rem; color: #94a3b8;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ── article ── */
.nr-article { max-width: 44rem; margin: 0 auto; }
.nr-art-title { font-family: "Sora", system-ui, sans-serif; font-size: 1.45rem; font-weight: 700; color: #fff; line-height: 1.6; margin: 0 0 1.2rem; }
.nr-art-body .nr-art-p { margin: 0 0 1.15rem; line-height: 2.25; color: #dbe3ee; }
.nr-art-body .nr-art-h { margin: 1.4rem 0 .8rem; font-size: 1.15rem; font-weight: 600; line-height: 1.9; color: #fff; }
.nr-art-img { display: block; max-width: 100%; height: auto; border-radius: .6rem; margin: 1.1rem auto; background: rgba(255,255,255,.04); }

/* ── messages (loading / error / empty) ── */
.nr-msg { padding: 1rem 1.1rem; border-radius: .7rem; text-align: center; font-size: .9rem; color: #94a3b8;
  border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); }
.nr-msg[hidden] { display: none; }
.nr-msg a { color: #7dd3fc; }

/* ── interlinear annotated Chinese (copy of 17-learn.css .lx-*) ──
   Default = clean hanzi (pinyin row reserved, hidden). Hover/tap reveals the ruby
   pinyin in place + an English tooltip above the word. Tap-toggle (.is-open) is set
   by reading.js so it works on touch. Scoped under .nr so it can't leak. */
.nr .lx-zh { cursor: default; }
.nr .lx-w { position: relative; display: inline-block; text-align: center; vertical-align: bottom; padding: .1rem .04em 0; border-radius: .3rem; }
/* On hover/tap, a SUBTLE 1px ring (no fill) around the word — ties its pinyin + English to this 汉字. */
.nr .lx-w:hover, .nr .lx-w.is-open { box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.4); }
.nr .lx-w ruby { font-size: 1.4rem; line-height: 1.5; color: #eef2f7; }
.nr .lx-w rt { font-size: .46em; font-weight: 600; line-height: 1; padding-bottom: .3em; visibility: hidden; }   /* reserve the row + a little gap above the 汉字 */
.nr .lx-w-x { color: #cbd5e1; font-size: 1.4rem; }                                          /* punctuation / latin run */
.nr .lx-w-en {   /* HSK-lesson LOOK — plain English above the pinyin, ABSOLUTELY positioned so it
                    reserves no width (in flow it would scatter the article text, each word
                    reserving its English width). A SOLID deep-blue box (faint blue edge) keeps it
                    fully readable where it overlaps the line above. A long gloss WRAPS within a
                    bounded width and grows UPWARD (never runs off the column edge → never cut off). */
  position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%);
  visibility: hidden; pointer-events: none; margin-bottom: 0.3rem;   /* gap between the English and the pinyin */
  width: max-content; max-width: min(15rem, 80vw); white-space: normal; overflow-wrap: break-word;
  text-align: center; line-height: 1.2; font-size: 0.64rem; color: #c4d0e6;
  background: #172546; border: 1px solid rgba(96, 165, 250, 0.4);
  border-radius: 0.3rem; padding: 0.1rem 0.4rem; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.6); }
/* …and ALL words on keyboard focus of the sentence (.lx-zh has tabindex=0), mirroring
   the canonical 25-annotate-zh.css so keyboard users get pinyin/gloss here too. */
.nr .lx-w:hover rt, .nr .lx-w.is-open rt, .nr .lx-zh:focus rt { visibility: visible; }
.nr .lx-w:hover .lx-w-en, .nr .lx-w.is-open .lx-w-en, .nr .lx-zh:focus .lx-w-en { visibility: visible; }
/* Copy yields ONLY the 汉字 — pinyin (rt) + English gloss never enter the selection. */
.nr .lx-w rt, .nr .lx-w-en { -webkit-user-select: none; user-select: none; }
.nr .lx-t1 { color: #f87171; } .nr .lx-t2 { color: #fbbf24; } .nr .lx-t3 { color: #34d399; }
.nr .lx-t4 { color: #60a5fa; } .nr .lx-t0 { color: #94a3b8; }

@media (max-width: 480px) {
  .nr .lx-w ruby, .nr .lx-w-x { font-size: 1.25rem; }
  .nr-refresh-label { display: none; }
}

/* ── Reader text size: the Aa toolbar button (data-nr-fs) cycles --nr-fs on .nr-art-body. Only the
   ARTICLE text scales — it reflows within the same column (no horizontal overflow); the pinyin
   <rt> is em-relative, so it scales with the 汉字 automatically. */
.nr .nr-art-body .lx-w ruby,
.nr .nr-art-body .lx-w-x { font-size: calc(1.4rem * var(--nr-fs, 1)); }
.nr .nr-art-body .lx-w-en { font-size: calc(0.64rem * var(--nr-fs, 1)); }
@media (max-width: 480px) {
  .nr .nr-art-body .lx-w ruby,
  .nr .nr-art-body .lx-w-x { font-size: calc(1.25rem * var(--nr-fs, 1)); }
}