/* Chinese writing practice sheets: generator UI + printable sheet (2026-11-05).
   The sheet is paper: always white with fixed inks, whatever the screen theme. */

.ws-app { margin: 18px 0 8px; }
.ws-controls { background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 18px 14px; }
.ws-controls label { display: block; font-weight: 700; font-size: .92rem; color: var(--ink); }
.ws-controls label > span { display: block; margin-bottom: 5px; }
.ws-input { width: 100%; box-sizing: border-box; min-height: 84px; resize: vertical; font: 1.25rem/1.5 'Nunito', 'PingFang SC', 'Noto Sans SC', sans-serif;
  padding: 10px 12px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--card); color: var(--ink); }
.ws-input:focus { outline: none; border-color: var(--primary); }
.ws-quick { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin: 10px 0 2px; font-size: .88rem; color: var(--muted); }
.ws-quick button { font: 600 .85rem 'Nunito', sans-serif; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); color: var(--primary-ink); cursor: pointer; }
.ws-quick button:hover { background: var(--primary-tint); }
.ws-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 14px; margin-top: 14px; }
.ws-opts select { width: 100%; font: 600 .95rem 'Nunito', sans-serif; padding: 7px 8px; border: 1.5px solid var(--border); border-radius: 10px; background: var(--card); color: var(--ink); }
.ws-checks { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 12px; }
.ws-checks label { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; cursor: pointer; }
.ws-checks input { width: 17px; height: 17px; accent-color: var(--primary); }
.ws-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; align-items: center; }
.ws-actions .btn { font: 700 1rem 'Nunito', sans-serif; cursor: pointer; }
.ws-status { margin: 10px 0 0; font-size: .9rem; color: var(--ink); min-height: 1.3em; }
.ws-status-muted { color: var(--muted); }
.ws-status-warn { color: #9a5b00; }
.ws-status-ok { color: var(--primary-ink); }
.ws-parts { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin-top: 10px; font-size: .9rem; }
.ws-parts-label { color: var(--muted); margin-right: 4px; }
.ws-part { font: 700 .85rem 'Nunito', sans-serif; padding: 5px 12px; border-radius: 999px; border: 1.5px solid var(--primary); background: var(--card); color: var(--primary-ink); cursor: pointer; }
.ws-part.is-on { background: var(--primary); color: #fff; }
.ws-preset-note { margin-top: 12px; font-size: .9rem; color: var(--muted); }

/* ---- preview ---- */
#ws-preview { margin-top: 22px; overflow: hidden; }
#ws-out { display: flex; flex-direction: column; align-items: flex-start; }
#ws-out .ws-sheet { flex: none; }
.ws-sheet { position: relative; box-sizing: border-box; width: var(--ws-w, 215.9mm); height: var(--ws-h, 279.4mm); padding: var(--ws-margin, 11mm);
  background: #fff; color: #111; box-shadow: 0 6px 28px rgba(0, 0, 0, .18); margin: 0 0 18px; transform-origin: top left; overflow: hidden;
  font-family: 'Nunito', 'Helvetica Neue', Arial, sans-serif; }
.ws-head { display: flex; align-items: center; justify-content: space-between; height: 11mm; font-size: 10pt; color: #222; border-bottom: .4mm solid #222; margin-bottom: 1.5mm; }
.ws-name { display: inline-flex; align-items: baseline; gap: 2mm; }
.ws-name .ws-line { display: inline-block; width: 38mm; border-bottom: .3mm solid #555; height: 4mm; }
.ws-title { font-weight: 700; }
.ws-page { color: #666; font-size: 9pt; }
.ws-foot { position: absolute; left: var(--ws-margin, 11mm); right: var(--ws-margin, 11mm); bottom: calc(var(--ws-margin, 11mm) - 2mm); display: flex; justify-content: space-between; font-size: 7.5pt; color: #777; }
.ws-row { margin-bottom: 1.2mm; break-inside: avoid; }
.ws-meta { display: flex; align-items: flex-end; gap: 2.2mm; box-sizing: border-box; height: var(--ws-meta, 9mm); font-size: 10pt; line-height: 1; padding-bottom: .7mm; overflow: hidden; white-space: nowrap; }
.ws-hw { font-family: 'Kaiti SC', 'Kaiti TC', 'STKaiti', 'KaiTi', 'DFKai-SB', 'BiauKai', 'AR PL UKai CN', 'Noto Serif SC', serif; font-size: 12pt; color: #111; }
.ws-py { color: #1e7e34; font-weight: 700; }
.ws-zy { color: #4a6b8a; font-weight: 700; }
.ws-def { color: #555; max-width: 34%; overflow: hidden; text-overflow: ellipsis; }
.ws-so-slot { flex: 1; min-width: 0; display: flex; justify-content: flex-start; overflow: hidden; margin-left: 1.5mm; }
.ws-so { display: inline-flex; gap: .6mm; height: calc(var(--ws-meta, 9mm) - 1.2mm); }
.ws-so-step { height: 100%; width: auto; aspect-ratio: 1 / 1; }
.ws-cells { display: grid; grid-template-columns: repeat(var(--ws-cols, 10), var(--ws-cell, 19mm)); }
.ws-cell { width: var(--ws-cell, 19mm); height: var(--ws-cell, 19mm); display: block; }
.ws-box { fill: #fff; stroke: #6b6b6b; stroke-width: 7; }
.ws-guide line { stroke: #bdbdbd; stroke-width: 4; stroke-dasharray: 22 16; }
.ws-glyph path { fill: #111; }
.ws-trace .ws-glyph path { fill: #222; }
.ws-text { font-family: 'Kaiti SC', 'Kaiti TC', 'STKaiti', 'KaiTi', 'DFKai-SB', 'BiauKai', 'AR PL UKai CN', 'Noto Serif SC', serif; fill: #111; }
.ws-so-step .ws-stroke-done { fill: #b5b5b5; }
.ws-so-step .ws-stroke-now { fill: #111; }
.ws-nodata .ws-meta::after { content: ''; }

/* ---- page copy ---- */
.ws-sets { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin: 16px 0 6px; }
.ws-set { display: block; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; text-decoration: none; color: var(--ink); box-shadow: var(--shadow-sm); }
.ws-set:hover { border-color: var(--primary); }
.ws-set b { display: block; font-size: 1.05rem; margin-bottom: 3px; color: var(--primary-ink); }
.ws-set span { font-size: .88rem; color: var(--muted); }
.ws-set .ws-sample { display: block; margin-top: 8px; font-size: 1.35rem; letter-spacing: .12em; color: var(--ink); }
.ws-how { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-top: 14px; }
.ws-how div { background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; font-size: .95rem; }
.ws-how b { display: block; margin-bottom: 4px; }
.ws-chars { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 14px; margin-top: 12px; font-size: .95rem; }
.ws-chars li { list-style: none; display: flex; gap: 8px; align-items: baseline; }
.ws-chars .c { font-size: 1.35rem; min-width: 1.4em; }
.ws-chars .p { color: var(--primary-ink); font-weight: 700; }
.ws-chars .d { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-faq details { border-top: 1px solid var(--border); padding: 10px 0; }
.ws-faq summary { font-weight: 700; cursor: pointer; }
.ws-faq p { margin: 8px 0 0; color: var(--muted); }

@media (max-width: 640px) {
  .ws-controls { padding: 14px 12px 12px; }
  .ws-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media print {
  @page { margin: 0; }
  html, body { margin: 0 !important; padding: 0 !important; background: #fff !important; }
  body > :not(main), main > :not(.ws-app):not(#ws-app), .ws-app > :not(#ws-preview), .ws-controls, .ws-parts, .ws-status { display: none !important; }
  main, .hsk-wrap, .content-wrapper { max-width: none !important; padding: 0 !important; margin: 0 !important; }
  #ws-preview { margin: 0 !important; overflow: visible !important; }
  .ws-sheet { transform: none !important; margin: 0 !important; box-shadow: none !important; page-break-after: always; break-after: page; }
  .ws-sheet:last-child { page-break-after: auto; break-after: auto; }
  .ws-box, .ws-glyph path, .ws-guide line { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Email-for-PDF card (2026-11-06) */
.ws-magnet { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; margin: 18px 0 6px; padding: 18px 20px; background: var(--primary-tint, #f0f7f1); border: 1px solid var(--border, #cfe6d3); border-radius: var(--radius-sm, 14px); }
.ws-magnet-text { flex: 1 1 260px; }
.ws-magnet h2 { margin: 0 0 4px; font-size: 1.1rem; color: var(--primary-ink, #14501f); }
.ws-magnet p { margin: 0; font-size: .92rem; line-height: 1.5; color: var(--muted, #3a5a40); }
.ws-magnet-form { flex: 1 1 300px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ws-magnet-form select, .ws-magnet-form input[type=email] { flex: 1 1 160px; min-width: 0; padding: 11px 12px; border: 1.5px solid var(--border, #b7d6bd); border-radius: 10px; font: inherit; background: var(--card, #fff); color: var(--ink, inherit); }
.ws-magnet-form input[type=email]:focus { outline: none; border-color: var(--primary, #34a853); }
.ws-magnet-form .btn { white-space: nowrap; }
.ws-magnet-form .ws-hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }
.ws-magnet-note { flex-basis: 100%; margin: 0; font-size: .82rem; color: var(--muted, #6b8a70); min-height: 1em; }
.ws-magnet-done { margin: 0; font-weight: 700; color: var(--primary-ink, #1e7d36); }
@media (max-width: 520px) { .ws-magnet-form select, .ws-magnet-form input[type=email], .ws-magnet-form .btn { flex-basis: 100%; } }