/* HSK vocabulary hub + level pages (generate_hsk_pages.py). Loaded after
   /css/styles.css; reuses its tokens. Light-mode only like the rest of the site. */

.hsk-wrap { max-width: 1000px; margin: 0 auto; padding: 32px 20px 0; }
.hsk-wrap h1 { font-size: clamp(28px, 4.6vw, 42px); margin-bottom: .35em; }
.h1-sub { display: block; font-size: .42em; font-weight: 700; color: var(--primary-dark);
  letter-spacing: .04em; text-transform: uppercase; margin-top: 6px; }
.lede { font-size: 1.1rem; color: #334; max-width: 760px; }
.hsk-sec { margin-top: 44px; }
.hsk-sec h2, .hsk-faq h2 { font-size: 1.55rem; }
.hsk-src { font-size: .82rem; color: var(--muted); border-left: 3px solid var(--border); padding-left: 12px; margin-top: 18px; }
.hsk-table tbody td:first-child { cursor: pointer; }
.hsk-sec .note, .hsk-legend { font-size: .9rem; color: var(--muted); }
[lang="zh-Hans"], [lang="zh-Hant"], .hsk-table tbody td:first-child { font-family: 'Nunito', 'PingFang SC', 'PingFang TC', 'Hiragino Sans GB', 'Noto Sans CJK SC', 'Microsoft YaHei', sans-serif; }

/* level tabs */
.lvl-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 18px; }
.lvl-tabs a { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--bg-soft); color: var(--muted); font-weight: 700; font-size: .88rem; }
.lvl-tabs a:hover { border-color: var(--primary); color: var(--primary-dark); }
.lvl-tabs a.on { background: var(--primary); border-color: var(--primary); color: #fff; }

/* stat tiles */
.hsk-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 22px 0 18px; }
.hsk-stats div { background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; }
.hsk-stats b { display: block; font-size: 1.6rem; line-height: 1.15; color: var(--primary-dark); }
.hsk-stats span { font-size: .86rem; color: var(--muted); line-height: 1.35; display: block; }
.hsk-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.hsk-actions .btn { font: 700 1rem 'Nunito', sans-serif; }
.btn-ghost { background: #fff; color: var(--primary-dark) !important; border: 1.5px solid var(--primary); box-shadow: none; }
.btn-ghost:hover { background: var(--primary-tint); }

/* toolbar */
.hsk-tools { position: sticky; top: var(--hsk-top, 0px); z-index: 20; background: rgba(255,255,255,.97);
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px 4px; margin-bottom: 0;
  box-shadow: var(--shadow-sm); }
.hsk-q { width: 100%; font: 600 1.05rem 'Nunito', sans-serif; padding: 10px 14px; border: 1.5px solid var(--border);
  border-radius: 10px; background: #fff; color: var(--ink); }
.hsk-q:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-tint); }
.tool-row { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 10px 0 8px; }
.tool-row label { font-size: .82rem; font-weight: 700; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.tool-row select { font: 600 .9rem 'Nunito', sans-serif; padding: 5px 8px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--bg-soft); color: var(--ink); }
.hsk-filters { margin: 4px 0 6px; gap: 6px; }
.hsk-filters .chip { font-size: .8rem; padding: 5px 11px; }
.hsk-count { font-size: .82rem; color: var(--muted); margin: 0 0 6px; }

/* the table */
.hsk-table { display: table; width: 100%; border-collapse: separate; border-spacing: 0; overflow: visible;
  margin: 10px 0 12px; counter-reset: w; font-size: .98rem; }
.hsk-table thead th { position: sticky; top: var(--hsk-th, 0px); z-index: 5; background: var(--bg-soft);
  text-align: left; padding: 9px 12px; border-bottom: 2px solid var(--border); font-size: .82rem;
  text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.hsk-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.hsk-table tbody tr { counter-increment: w; }
.hsk-table tbody tr:hover { background: #fafcfb; }
.hsk-table td:nth-child(1) { white-space: nowrap; font-size: 1.45rem; line-height: 1.3; width: 1%; }
.hsk-table td:nth-child(1)::before { content: counter(w); display: block; font: 700 .68rem 'Nunito', sans-serif;
  color: #9aa4b0; letter-spacing: .03em; }
.hsk-table td:nth-child(1) b { font-weight: 600; }
.hsk-table td:nth-child(1) b.t { color: var(--muted); font-size: .8em; margin-left: .35em; }
.hsk-table td:nth-child(2) { white-space: nowrap; color: var(--primary-dark); font-weight: 700; width: 1%; }
.hsk-table td:nth-child(2) i { display: none; font-style: normal; color: #4a6b8a; font-weight: 600; }
.hsk-table td:nth-child(3) { color: var(--ink); }
.hsk-table td:nth-child(4), .hsk-table th:nth-child(4) { white-space: nowrap; color: var(--muted); font-size: .8rem; text-align: center; width: 1%; }
.hsk-table abbr { text-decoration: none; }
.hsk-table .x { margin: 5px 0 0; font-size: .93rem; color: #3d4652; line-height: 1.5; }
.hsk-table .x b { color: var(--primary-dark); font-weight: 800; }
.hsk-table .x em { font-style: normal; color: var(--muted); font-size: .92em; }
.hsk-table .x a { font-size: .82em; font-weight: 700; white-space: nowrap; }

/* script / reading / meaning toggles (class on <html>) */
.scr-s .hsk-table .t, .scr-s .hsk-page .t { display: none !important; }
.scr-t .hsk-page .s { display: none !important; }
.scr-t .hsk-table td:nth-child(1) b.t { color: inherit; font-size: 1em; margin: 0; }
.scr-b .hsk-table .x .t, .scr-b .qz .x .t, .scr-b .wchip .t, .scr-b .moved .t, .scr-b .lvl-sample .t { display: none; }
.rd-z .hsk-table td:nth-child(2) span { display: none; }
.rd-z .hsk-table td:nth-child(2) i, .rd-pz .hsk-table td:nth-child(2) i { display: block; }
.rd-pz .hsk-table td:nth-child(2) i { font-size: .85em; }
.ex-h .hsk-table .x { display: none; }
.rd-h .hsk-table tbody td:nth-child(2), .mn-h .hsk-table tbody td:nth-child(3) { cursor: pointer; }
.rd-h .hsk-table tbody td:nth-child(2) > *, .mn-h .hsk-table tbody td:nth-child(3) { color: transparent !important; text-shadow: none; }
.rd-h .hsk-table tbody td:nth-child(2)::after, .mn-h .hsk-table tbody td:nth-child(3)::after { content: ''; }
.rd-h .hsk-table tbody td:nth-child(2) { background: repeating-linear-gradient(135deg, #eef3f0 0 6px, #f6f9f7 6px 12px); }
.mn-h .hsk-table tbody td:nth-child(3) { background: repeating-linear-gradient(135deg, #eef3f0 0 6px, #f6f9f7 6px 12px); }
.mn-h .hsk-table tbody td:nth-child(3) * { visibility: hidden; }
.rd-h .hsk-table tbody td.rv:nth-child(2), .mn-h .hsk-table tbody td.rv:nth-child(3) { background: none; }
.rd-h .hsk-table tbody td.rv:nth-child(2) > * { color: var(--primary-dark) !important; }
.mn-h .hsk-table tbody td.rv:nth-child(3) { color: var(--ink) !important; }
.mn-h .hsk-table tbody td.rv:nth-child(3) * { visibility: visible; }
.hsk-table tr.hide { display: none; }

/* sections */
.hsk-moved { margin: 14px 0; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 16px; }
.hsk-moved summary { cursor: pointer; font-weight: 700; color: var(--primary-dark); }
.hsk-moved h4 { margin: 16px 0 8px; font-size: 1rem; }
.hsk-moved .cnt { color: var(--muted); font-weight: 600; }
.moved { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.moved li { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 2px 9px; font-size: 1.02rem; }
.moved .mp { color: var(--muted); font-size: .8rem; }
.char-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px; margin: 14px 0; }
.char-grid li { background: #fff; border: 1px solid var(--border); border-radius: 10px; text-align: center; padding: 6px 2px 4px;
  font-size: 1.5rem; line-height: 1.2; }
.char-grid .tv { display: block; font-size: .72rem; color: var(--muted); line-height: 1.2; }
.scr-s .char-grid .tv { display: none; }
.wchips { display: flex; flex-wrap: wrap; gap: 6px; }
.wchip { background: var(--primary-tint); color: var(--primary-dark); border-radius: 8px; padding: 2px 10px; font-size: 1.15rem; font-weight: 600; }
.hsk-next { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin: 18px 0; }
.next-card { display: block; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 16px 18px; box-shadow: var(--shadow-sm); color: var(--ink); transition: border-color .2s ease, transform .2s ease; }
.next-card:hover { border-color: var(--primary); transform: translateY(-2px); color: var(--ink); }
.next-card b { display: block; color: var(--primary-dark); margin-bottom: 4px; }
.next-card span { font-size: .9rem; color: var(--muted); }
.hsk-faq { margin-top: 44px; }
.hsk-faq details { border-bottom: 1px solid var(--border); padding: 12px 0; }
.hsk-faq summary { cursor: pointer; font-weight: 700; font-size: 1.05rem; }
.hsk-faq details p { margin: 10px 0 2px; }
.prev-next { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 34px; font-weight: 700; }
.hsk-wrap .related-posts { margin-top: 30px; }

/* hub */
.lvl-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; margin: 26px 0 8px; }
.lvl-card { display: flex; flex-direction: column; gap: 2px; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 18px 16px; box-shadow: var(--shadow-sm); color: var(--ink);
  transition: transform .2s ease, border-color .2s ease; }
.lvl-card:hover { transform: translateY(-2px); border-color: var(--primary); color: var(--ink); }
.lvl-name { font-size: 1.35rem; font-weight: 800; }
.lvl-count { font-size: .86rem; font-weight: 700; color: var(--muted); }
.lvl-sample { margin-top: 8px; font-size: 1.2rem; color: var(--primary-dark); display: flex; flex-wrap: wrap; gap: 4px 10px; }
.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.hsk-overview { display: table; min-width: 640px; font-size: .95rem; margin: 10px 0; }
.hsk-overview th, .hsk-overview td { padding: 9px 10px; border-bottom: 1px solid var(--border); text-align: right; white-space: nowrap; }
.hsk-overview thead th { background: var(--bg-soft); font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; white-space: normal; vertical-align: bottom; }
.hsk-overview th:first-child, .hsk-overview td:first-child { text-align: left; }
.hsk-overview td.dl { text-align: center; }
.vers li { margin: 0 0 10px 20px; }
.tw-note { background: #eef6f9; border: 1px solid #d5e8f0; border-radius: var(--radius); padding: 6px 22px 8px; }
.tw-note h2 { margin-top: 14px; }

/* quiz overlay */
.hsk-quiz { position: fixed; inset: 0; z-index: 200; background: rgba(20,30,25,.55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.hsk-quiz[hidden] { display: none; }
.qz { background: #fff; border-radius: 22px; box-shadow: var(--shadow); width: 100%; max-width: 460px; padding: 20px 22px 22px; text-align: center; }
.qz-top { display: flex; justify-content: space-between; align-items: center; font-size: .85rem; color: var(--muted); font-weight: 700; }
.qz-close { background: none; border: none; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--muted); padding: 2px 6px; }
.qz-bar { height: 5px; background: var(--bg-soft); border-radius: 3px; margin: 10px 0 6px; overflow: hidden; }
.qz-bar i { display: block; height: 100%; background: var(--primary); width: 0; transition: width .2s ease; }
.qz-card { min-height: 230px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; cursor: pointer; padding: 10px 0; }
.qz-word { font-size: 3.4rem; line-height: 1.15; font-weight: 600; }
.qz-word b { font-weight: 600; }
.qz-word .t { margin-left: .25em; color: var(--muted); font-size: .6em; }
.scr-t .qz-word .t { color: inherit; font-size: 1em; margin: 0; }
.qz-back { display: none; }
.qz.flip .qz-back { display: block; }
.qz-py { font-size: 1.35rem; font-weight: 800; color: var(--primary-dark); }
.qz-py i { display: block; font-style: normal; font-size: .8em; color: #4a6b8a; }
.qz-def { color: var(--ink); margin: 4px 0; }
.qz-back .x { font-size: .95rem; color: #3d4652; }
.qz-back .x em { display: block; font-style: normal; color: var(--muted); font-size: .9em; }
.qz-back .x b { color: var(--primary-dark); }
.qz-hint { font-size: .85rem; color: var(--muted); }
.qz.flip .qz-hint { display: none; }
.qz-say { background: none; border: 1px solid var(--border); border-radius: 999px; padding: 5px 14px; font: 700 .85rem 'Nunito', sans-serif; color: var(--primary-dark); cursor: pointer; }
.qz-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.qz-btns button { font: 800 1rem 'Nunito', sans-serif; padding: 12px; border-radius: 12px; cursor: pointer; border: 1.5px solid var(--border); background: var(--bg-soft); color: var(--ink); }
.qz-btns .ok { background: var(--primary); border-color: var(--primary); color: #fff; }
.qz-btns button:disabled { opacity: .45; cursor: default; }
.qz-end h3 { font-size: 1.4rem; margin: 10px 0 4px; }
.qz-end p { color: var(--muted); }
.qz-end .btn { margin: 4px; font: 700 1rem 'Nunito', sans-serif; }

/* phones: rows become cards */
@media (max-width: 680px) {
  .hsk-wrap { padding-top: 22px; }
  .hsk-stats { grid-template-columns: 1fr 1fr; }
  .hsk-stats b { font-size: 1.35rem; }
  .lvl-cards { grid-template-columns: 1fr 1fr; gap: 10px; }
  .lvl-card { padding: 14px; }
  .lvl-sample { font-size: 1.05rem; }
  .hsk-tools { position: static; padding: 10px 12px 2px; }
  .tool-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
  .tool-row label { flex-direction: column; align-items: stretch; gap: 2px; font-size: .74rem; min-width: 0; }
  .tool-row select { width: 100%; min-width: 0; }
  .hsk-table, .hsk-table tbody { display: block; }
  .hsk-table thead { display: none; }
  .hsk-table tbody tr { display: grid; grid-template-columns: auto 1fr auto; column-gap: 12px; padding: 12px 2px; border-bottom: 1px solid var(--border); }
  .hsk-table tbody tr.hide { display: none; }
  .hsk-table td { padding: 0; border: 0; }
  .hsk-table td:nth-child(1) { grid-row: 1 / span 2; font-size: 1.6rem; }
  .hsk-table td:nth-child(1) b.t { display: block; margin: 0; font-size: .7em; }
  .scr-s .hsk-table td:nth-child(1) b.t { display: none; }
  .hsk-table td:nth-child(2) { grid-column: 2; align-self: end; }
  .hsk-table td:nth-child(4) { grid-column: 3; grid-row: 1; text-align: right; }
  .hsk-table td:nth-child(3) { grid-column: 2 / span 2; font-size: .95rem; }
  .hsk-table td:nth-child(2), .hsk-table td:nth-child(1) { width: auto; }
  .qz-word { font-size: 2.8rem; }
}

/* print / Save as PDF */
@media print {
  @page { margin: 14mm 12mm; }
  header, footer, .cta-box, .hsk-actions, .hsk-tools, .lvl-tabs, .breadcrumb, .hsk-stats, .hsk-sec, .hsk-faq,
  .prev-next, .related-posts, .hsk-quiz, .hsk-legend { display: none !important; }
  body { font-size: 10.5pt; color: #000; }
  .hsk-wrap { max-width: none; padding: 0; }
  .hsk-wrap h1 { font-size: 18pt; margin: 0 0 2pt; }
  .lede { font-size: 9pt; color: #333; margin-bottom: 8pt; }
  .lede::after { content: " — literatelanguages.com/chinese/hsk-vocabulary/"; }
  .hsk-table { font-size: 9.5pt; }
  .hsk-table thead { display: table-header-group; }
  .hsk-table thead th { position: static; background: #eee !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .hsk-table tr { break-inside: avoid; }
  .hsk-table td { padding: 3pt 6pt; }
  .hsk-table td:nth-child(1) { font-size: 13pt; }
  .hsk-table .x a { display: none; }
  .hsk-table tbody tr:hover { background: none; }
  .rd-h .hsk-table tbody td:nth-child(2), .mn-h .hsk-table tbody td:nth-child(3) { background: none !important; }
}