/* 中文 Level 1–6 lesson player.
   Loaded only on lessons that have structured content, so the rest of the site
   pays nothing for it. Colours come from the book itself: lantern cinnabar,
   the jade of the section banners, and the violet the pinyin is printed in. */

.zw {
  --zw-cinnabar: #c0392b; --zw-cinnabar-w: #fbeae7;
  --zw-jade: #2f7a5f;     --zw-jade-w: #e6f2ec;
  --zw-violet: #6f49a3;   --zw-violet-w: #f1ecf9;
  --zw-gold: #8a6508;     --zw-gold-w: #fbf1dc;
  --zw-sky: #2f6f9e;      --zw-sky-w: #e8f1f8;
  --zw-ink: #2b2622;      --zw-ink-2: #5c534b; --zw-ink-3: #6f655c;
  --zw-line: #e4dbcd;     --zw-card: #fff;     --zw-paper: #faf6ef;
  --zw-size: 1.9rem;
  --zw-han: "Kaiti SC","STKaiti",KaiTi,"Noto Serif CJK SC","Songti SC",serif;
  margin: 1.25rem 0 2rem;
}
@media (prefers-color-scheme: dark) {
  .zw {
    --zw-cinnabar:#e8776a; --zw-cinnabar-w:#331e1a;
    --zw-jade:#6bbd9b;     --zw-jade-w:#16281f;
    --zw-violet:#b799e0;   --zw-violet-w:#241c33;
    --zw-gold:#dcae4a;     --zw-gold-w:#2c2413;
    --zw-sky:#7fb6dd;      --zw-sky-w:#152430;
    --zw-ink:#efe7da; --zw-ink-2:#c2b7a6; --zw-ink-3:#9a8f80;
    --zw-line:#3f3728; --zw-card:#221e18; --zw-paper:#17150f;
  }
}

/* ── tabs ─────────────────────────────────────────────────────────────── */
.zw-tabs { display: flex; gap: .25rem; overflow-x: auto; border-bottom: 1px solid var(--zw-line); }
.zw-tabs::-webkit-scrollbar { display: none; }
.zw-tab {
  flex: none; border: 0; background: none; cursor: pointer; white-space: nowrap;
  padding: .7rem .9rem; min-height: 44px; font: inherit; font-weight: 600;
  font-size: .95rem; color: var(--zw-ink-3); border-bottom: 3px solid transparent;
}
.zw-tab:hover { color: var(--zw-ink); }
.zw-tab.is-on { color: var(--zw-cinnabar); border-bottom-color: var(--zw-cinnabar); }
.zw-pill {
  background: var(--zw-jade-w); color: var(--zw-jade); border-radius: 999px;
  padding: .05rem .45rem; font-size: .75rem; margin-left: .25rem;
}

/* Below 480px the four tabs do not fit on one line, and the strip scrolls
   without saying so — 「原书 Book」 simply was not there. Stacking the English
   under the Chinese brings all four onto the screen; nothing is dropped,
   because a reader who wants the Chinese and a reader who wants the English
   are both in the audience. */
@media (max-width: 480px) {
  .zw-tab { padding: .5rem .55rem; font-size: .92rem; line-height: 1.15; text-align: center; }
  .zw-tab .zw-tab-en { display: block; font-size: .7rem; font-weight: 500; opacity: .75; }
  .zw-pill { margin-left: .15rem; padding: .02rem .35rem; font-size: .68rem; }
}
.zw-pane { padding-top: 1.1rem; }
.zw-pane[hidden] { display: none !important; }

.zw-toolbar { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; padding: .75rem 0; }
.zw-toolbar .btn { min-height: 44px; }
.zw-toolbar .btn[aria-pressed="true"] { background: var(--zw-jade-w); border-color: var(--zw-jade); color: var(--zw-jade); }

.zw-note {
  background: var(--zw-gold-w); color: var(--zw-ink-2); font-size: .85rem;
  border: 1px solid color-mix(in srgb, var(--zw-gold) 35%, transparent);
  border-radius: 9px; padding: .5rem .7rem;
}
.zw-note.zw-block { display: block; margin: 0 0 1rem; }
.zw-note span { display: block; color: var(--zw-ink-3); }
.zw-empty { color: var(--zw-ink-3); text-align: center; padding: 2rem 0; }

/* ── the text ─────────────────────────────────────────────────────────── */
.zw-sec { margin: 0 0 1.9rem; }
.zw-sec h2 { display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap; margin: 0 0 .75rem; font-size: 1.05rem; }
.zw-plate {
  font-family: var(--zw-han); font-size: 1.45rem; font-weight: 400; letter-spacing: .08em;
  padding: .1rem .6rem; border-radius: 8px; background: var(--zw-paper); color: var(--zw-ink-2);
}
.sec-text     .zw-plate { background: var(--zw-cinnabar-w); color: var(--zw-cinnabar); }
.sec-reading  .zw-plate { background: var(--zw-sky-w);      color: var(--zw-sky); }
.sec-chars    .zw-plate { background: var(--zw-jade-w);     color: var(--zw-jade); }
.sec-exercise .zw-plate { background: var(--zw-gold-w);     color: var(--zw-gold); }
.sec-review   .zw-plate { background: var(--zw-violet-w);   color: var(--zw-violet); }
.zw-sec h2 small { color: var(--zw-ink-3); font-weight: 500; }

.zw-card {
  background: var(--zw-card); border: 1px solid var(--zw-line); border-radius: 14px;
  padding: 1.2rem 1.3rem; margin: 0 0 .8rem;
  max-width: calc(var(--zw-size) * 26);
}
/* Each character is an inline-flex column of pinyin over glyph, so the box is
   taller than the font's own line box and the browser's leading disappears.
   The line-height has to clear the whole column, and shrinks when pinyin is off. */
/* A card of one- and two-character entries reads as a row, not a column. */
.zw-row { display: flex; flex-wrap: wrap; gap: .3rem 1.5rem; align-items: flex-end; }
.zw-row .zw-line { margin: 0; }
/* A line and its translation are one thing and must wrap as one, or a row card
   can leave the English sitting beside the wrong line. */
.zw-item { min-width: 0; }
.zw-row > .zw-item { margin: 0; }
.zw-row .zw-en-line { margin-bottom: 0; }

.zw-line { margin: 0 0 .5rem; font-family: var(--zw-han); font-size: var(--zw-size); line-height: 2.25; }
.zw-line:last-child { margin-bottom: 0; }
.zw.no-py .zw-line { line-height: 1.7; }

/* The English sits under its line, quieter than the Chinese: it is a crutch
   for the reader, not the thing being read. Hidden by the English toggle. */
.zw-en-line {
  margin: .1rem 0 .9rem;
  color: var(--muted, #6b7280);
  font-size: .95rem;
  line-height: 1.45;
}
.zw.no-en .zw-en-line { display: none; }
.zw-shaky > .zw-c b, .zw-shaky > .zw-nb b { border-bottom: 2px dotted var(--zw-gold); }

.zw-c {
  display: inline-flex; flex-direction: column; align-items: center;
  vertical-align: bottom; cursor: pointer; border-radius: 6px; padding: 0 .04em;
  line-height: 1.15; transition: background .12s;
}
.zw-c:hover, .zw-c:focus-visible { background: var(--zw-gold-w); outline: none; }
.zw-c > i {
  font: 500 .40em/1.5 system-ui, sans-serif; font-style: normal;
  color: var(--zw-violet); height: 1.5em; white-space: nowrap;
}
.zw-c > b { font-weight: 400; font-size: 1em; }
.zw-c.zw-plain { cursor: default; }
.zw-c.zw-plain:hover { background: none; }
.zw.no-py .zw-c > i { display: none; }
.zw-nb { white-space: nowrap; }
.zw-c.is-playing { background: var(--zw-cinnabar-w); }

.zw-art { display: flex; gap: .8rem; flex-wrap: wrap; margin: 0 0 1.2rem; }
.zw-art figure { margin: 0; background: #fdfcf8; border: 1px solid var(--zw-line); border-radius: 10px; padding: .5rem; }
.zw-art img { display: block; width: auto; max-width: 220px; height: auto; border-radius: 5px; }

/* ── vocabulary ───────────────────────────────────────────────────────── */
.zw-cards { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.zw-card-c {
  background: var(--zw-card); border: 1px solid var(--zw-line); border-radius: 10px;
  padding: .7rem .5rem; text-align: center; cursor: pointer;
}
.zw-card-c:hover { border-color: var(--zw-jade); }
.zw-py { display: block; color: var(--zw-violet); font-size: .85rem; min-height: 1.2em; }
.zw-han {
  display: block; font-family: var(--zw-han); font-size: 2.7rem; line-height: 1.25; margin: .2rem auto;
  width: 76px; border: 1px solid var(--zw-line); border-radius: 6px;
  background: linear-gradient(var(--zw-line) 0 0) center/100% 1px no-repeat,
              linear-gradient(var(--zw-line) 0 0) center/1px 100% no-repeat;
}
/* CC-CEDICT glosses run from two words to a paragraph — 金 carries "gold;
   chemical element Au; generic term for lustrous and ductile metals". Left
   alone they make every card in the row as tall as the longest one. The full
   text stays in the DOM for screen readers and the title tooltip. */
.zw-en {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; font-size: .78rem; color: var(--zw-ink-3); line-height: 1.35;
}
.zw-cards { align-items: start; }
.zw-card-c { display: flex; flex-direction: column; }

/* ── exercises ────────────────────────────────────────────────────────── */
.zw-quizhead { margin-bottom: 1rem; }
.zw-quizhead p { color: var(--zw-ink-3); font-size: .9rem; margin: .3rem 0 0; }
.zw-score { margin-top: .6rem; font-weight: 700; }
.zw-ex { list-style: none; margin: 0; padding: 0; counter-reset: q; }
.zw-q {
  background: var(--zw-card); border: 1px solid var(--zw-line); border-radius: 14px;
  padding: 1rem 1.15rem; margin: 0 0 .9rem; counter-increment: q;
}
.zw-qp { margin: 0 0 .75rem; }
.zw-qp::before { content: counter(q) ". "; color: var(--zw-ink-3); font-weight: 700; }
.zw-qhan { font-family: var(--zw-han); font-size: 2rem; line-height: 1.3; display: block; }
.zw-qen { color: var(--zw-ink-3); font-size: .88rem; }
.zw-opts { display: flex; gap: .5rem; flex-wrap: wrap; }
.zw-opt {
  font: inherit; cursor: pointer; min-height: 44px; padding: .5rem .9rem;
  border: 1px solid var(--zw-line); background: var(--zw-paper); color: var(--zw-ink);
  border-radius: 10px; font-size: 1.05rem;
}
.zw-opt:hover { border-color: var(--zw-ink-3); }
.zw-opt.is-right { background: var(--zw-jade-w); border-color: var(--zw-jade); color: var(--zw-jade); font-weight: 600; }
.zw-opt.is-wrong { background: var(--zw-cinnabar-w); border-color: var(--zw-cinnabar); color: var(--zw-cinnabar); }
.zw-opt[disabled] { cursor: default; opacity: .8; }
.zw-fb { margin: .7rem 0 0; font-size: .9rem; color: var(--zw-ink-2); }
.zw-match { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem 1.2rem; }
.zw-col { display: flex; flex-direction: column; gap: .5rem; }
.zw-opt.is-sel { outline: 2px solid var(--zw-sky); outline-offset: 1px; }

.zw-flash { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.zw-fc {
  position: relative; border: 1px solid var(--zw-line); border-radius: 10px;
  background: var(--zw-paper); min-height: 96px; display: grid; place-items: center;
  cursor: pointer; padding: .5rem; text-align: center;
}
.zw-fc-front { font-family: var(--zw-han); font-size: 2.2rem; }
.zw-fc-back { display: none; font-size: .9rem; color: var(--zw-ink-2); }
.zw-fc.is-flipped .zw-fc-front { display: none; }
.zw-fc.is-flipped .zw-fc-back { display: block; }

/* ── book scans ───────────────────────────────────────────────────────── */
.zw-scan { margin: 0 0 1.2rem; }
.zw-scan img { width: 100%; height: auto; border: 1px solid var(--zw-line); border-radius: 12px; background: #fff; }
.zw-scan figcaption { font-size: .8rem; color: var(--zw-ink-3); padding-top: .35rem; }

@media (max-width: 640px) {
  .zw { --zw-size: 1.65rem; }
  .zw-card { padding: .95rem 1rem; }
  .zw-match { grid-template-columns: 1fr; }
  .zw-art img { max-width: 44vw; }
}