/* Lightweight feedback, readable empty states and compact mobile heroes. */
@media screen {
  /* Keep removal in the outer corner of each word card at every width. */
  #characterMode .workspace > .pane:first-child,
  #worksheetPanel .worksheet-character-details,
  .dictation-choice { position:relative; }
  #characterMode .workspace > .pane:first-child > .pane-title,
  .dictation-choice .dictation-word-heading { padding-right:48px; }
  #characterMode .featured-actions { margin-top:0; }
  #characterMode #featuredClear,
  #worksheetPanel .worksheet-detail-remove,
  .dictation-choice .dictation-remove {
    position:absolute; top:10px; right:10px; z-index:2;
    display:grid; place-items:center; width:44px; height:44px;
    min-width:44px; min-height:44px; padding:0;
    border:1px solid #e4b4b4; border-radius:8px;
    background:#fff; color:#a44848; font:400 24px/1 system-ui,sans-serif;
  }
  #characterMode #featuredClear:hover,
  #worksheetPanel .worksheet-detail-remove:hover,
  .dictation-choice .dictation-remove:hover { background:#fff0f0; }
  #worksheetPanel .worksheet-detail-remove[hidden] { display:none; }
  #worksheetPanel .worksheet-stroke-heading { padding-right:48px; }
  .dictation-choice-stroke-wrap:first-child .dictation-choice-stroke-replay { right:4px; }
  @media (max-width:520px) {
    #worksheetPanel .worksheet-detail-reading { padding-right:48px; }
  }
  #worksheetPanel #saveBtn { background:#c62828; border-color:#c62828; color:#fff; }
  #worksheetPanel #saveBtn:hover:not(:disabled) { background:#a91f1f; border-color:#a91f1f; }
  #worksheetPanel #saveBtn:focus-visible { outline:3px solid #c6282850; outline-offset:3px; }
  .about-page .hero::before { background-image:linear-gradient(90deg,#ffffffed 0%,#ffffffd4 34%,#ffffff72 57%,#ffffff00 82%),url('assets/about-cultural-jade.webp?r=ffc8ea75668bbbe3bfbf0327789bdf568c77648561979ca6e17a25c42c81d67d'); background-position:center; }
  .tool-empty-state svg.dictation-empty-art { fill:none; stroke:#386653; stroke-width:1.6; }
  .action-symbol { display:inline-block; font-size:1em; line-height:1; vertical-align:baseline; }
  .tool-empty-state { display:flex; align-items:center; gap:14px; padding:18px; margin:16px 0; border:1px dashed #cbdcd3; border-radius:14px; background:#f7faf8; color:#426356; }
  .tool-empty-state[hidden] { display:none; }
  .tool-empty-state svg { width:56px; height:56px; flex:none; fill:#e6f0ea; stroke:#54816e; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
  .tool-empty-state strong { font-size:14px; font-weight:650; }
  .tool-empty-state p { font-size:13px; line-height:1.5; margin:4px 0 0; }
  .field-help { font-size:13px; color:#526b60; margin:8px 0 12px; }
  .field-help summary { width:fit-content; cursor:pointer; padding:5px 0; text-decoration:underline; text-underline-offset:3px; }
  .field-help p { margin:5px 0; max-width:52ch; }
  .toast.is-success::before { content:'✅ '; }
  .audio-is-playing { background:#e6f3ec!important; border-color:#57967d!important; box-shadow:0 0 0 3px #205c4814; }
  .audio-status-active { color:#205c48; font-weight:650; }
  .audio-status-active::before { content:'🔊 '; }
  .result-enter { animation:result-enter .25s ease-out both; }
  .dictation-choice { animation:result-enter .25s ease-out both; }
  @keyframes result-enter { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
  @media (max-width:600px) {
    .about-page .hero::before { background-image:linear-gradient(90deg,#fffffff2,#ffffffd4 65%,#ffffff9c),url('assets/about-cultural-jade-mobile.webp?r=ffc8ea75668bbbe3bfbf0327789bdf568c77648561979ca6e17a25c42c81d67d'); }
    .hero,.about-page .hero { padding:22px 18px; min-height:0; margin-block:16px 22px; }
    .hero h1,.about-page .hero h1 { font-size:clamp(27px,7.2vw,36px); line-height:1.12; margin:12px 0 14px; }
    .hero p,.about-page .hero .lead { font-size:14px; line-height:1.55; margin:0; max-width:45ch; }
    .hero .eyebrow { font-size:9px; letter-spacing:.13em; }
    .hero::before { background-position:center; }
    .tabs { gap:12px; }
    .tabs .tab { font-size:13px; white-space:normal; text-align:left; }
    .tool-empty-state { padding:14px 12px; gap:10px; }
    .tool-empty-state svg { width:44px; height:44px; }
    .field-help summary { min-height:44px; display:flex; align-items:center; }
    .worksheet-actions .printbtn,.worksheet-actions .savebtn { white-space:normal; }
  }
  @media (prefers-reduced-motion:reduce) {
    .result-enter,.dictation-choice { animation:none; }
    .audio-is-playing { transition:none; }
    .hero::before,.hero[data-view="worksheet"]::before,.hero[data-view="dictation"]::before { animation:none!important; transform:none; }
  }
}
[data-stroke-loading]{position:relative}
[data-stroke-loading]::after{
  content:attr(data-stroke-character);position:absolute;inset:0;z-index:1;
  display:grid;place-items:center;background:#fff;color:#215c4b;
  font:500 clamp(30px,5vw,60px)/1.1 system-ui,'Segoe UI','Microsoft YaHei','PingFang SC','Noto Sans SC',sans-serif;
  pointer-events:none;
}
[data-stroke-unavailable]{display:grid;place-items:center;color:#215c4b;font-size:clamp(40px,6vw,72px);line-height:1.1}
@media print { .tool-empty-state,.field-help { display:none!important; } }

/* Fase 4: selected lexical units and a print-faithful A4 preview. */
.phase4-worksheet-selected,.phase4-worksheet-options{margin:16px 0;padding:16px;border:1px solid var(--line);border-radius:13px;background:#f8faf8}
.phase4-worksheet-selected h3,.phase4-worksheet-options h3{margin:0 0 12px;color:#174c3d}
.phase4-selected-entry{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:10px 0;border-top:1px solid #dbe6df}
.phase4-selected-entry>div:first-child{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;min-width:0}
.phase4-selected-entry strong{font-size:27px;color:#174c3d}.phase4-selected-entry small{color:#5b6c63}
.phase4-selected-entry label{white-space:nowrap;font-size:13px}.phase4-selected-entry input{width:54px;padding:6px;border:1px solid #b9cec1;border-radius:7px}
.phase4-entry-actions{display:flex;gap:4px}.phase4-entry-actions button{min-width:38px;min-height:38px;border:1px solid #c9d9cd;border-radius:7px;background:white;color:#174c3d}
.phase4-entry-actions button[data-remove]{color:#b4232c;border-color:#efb5b5}.phase4-entry-actions button:disabled{opacity:.35}
.phase4-worksheet-options{display:flex;flex-wrap:wrap;gap:12px 22px}.phase4-worksheet-options h3{flex-basis:100%}.phase4-worksheet-options label{display:flex;align-items:center;gap:6px;font-size:14px}
#phase4PreviewButton{margin:0 0 10px}#phase4SheetPreview{margin:0 0 18px}#phase4SheetPreview[hidden]{display:none!important}
.phase4-preview-pages{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:18px;max-height:750px;overflow:auto;padding:12px;background:#e8eee9;border-radius:10px}
.phase4-preview-sheet{position:relative;width:min(210mm,100%);aspect-ratio:210/297;overflow:hidden;background:#fff;box-shadow:0 3px 14px #123a2930}
.phase4-preview-pages .phase4-page{position:absolute;top:0;left:0;width:210mm;min-height:297mm;transform:scale(var(--phase4-preview-scale,1));transform-origin:top left;background:#fff}
.phase4-page{box-sizing:border-box;width:210mm;min-height:297mm;padding:10mm;color:#222;background:#fff;font-family:Arial,sans-serif}
.phase4-page-header{display:flex;justify-content:space-between;align-items:center;height:7mm;border-bottom:.2mm solid #777;font-size:9pt}
.phase4-page-intro{display:flex;align-items:baseline;gap:2.5mm;height:7mm;white-space:nowrap;overflow:hidden;font-size:8pt}
.phase4-page-intro strong{font-size:13pt}.phase4-page-intro small{font-size:7pt;color:#555}
.phase4-page-blocks{display:flex;flex-direction:column;gap:2mm}
.phase4-character-block{break-inside:avoid;min-width:0}
.phase4-character-block>header{display:flex;align-items:baseline;gap:3mm;height:4mm;font-size:8pt;color:#444}
.phase4-character-block>header strong{font-size:11pt;color:#111}
.phase4-character-rows{display:flex;flex-direction:column}
.phase4-rice-row{position:relative;display:grid;grid-template-columns:repeat(12,15.8mm);height:15.8mm;break-inside:avoid}
.phase4-rice-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.phase4-rice-lines path{fill:none;stroke:#c4c4c4;stroke-width:1}
.phase4-grid-cell{position:relative;z-index:1;display:inline-grid;place-items:center;box-sizing:border-box;width:15.8mm;height:15.8mm;border:.15mm solid #aaa;font-size:27pt;line-height:1;color:#161616}
.phase4-grid-cell::after{content:attr(data-char);position:relative;z-index:1}
.phase4-faint::after{opacity:.2}.phase4-blank::after,.phase4-stroke-progress::after{content:""}
.phase4-stroke-progress svg{position:absolute;inset:0;width:100%;height:100%;z-index:1}
@media(max-width:720px){.phase4-selected-entry{grid-template-columns:minmax(0,1fr) auto}.phase4-selected-entry label{grid-column:1}.phase4-entry-actions{grid-column:2;grid-row:1 / span 2}.phase4-preview-pages{justify-content:stretch}}
@media print{
  @page{size:A4 portrait;margin:0}
  .print-only.sheet>.print-sheet-header{display:none!important}
  .phase4-page{width:210mm;height:297mm;min-height:0;padding:10mm;break-after:page;box-shadow:none;overflow:hidden;color:#111}
  .phase4-page:last-child{break-after:auto}
  #printRows{display:block!important}
  .phase4-grid-cell{color:#111!important}
  .phase4-preview-pages{display:none!important}
}
/* Dictado presents selection first, then only audio controls until review. */
.dictation-selection-actions{display:flex;align-items:flex-start;gap:5px;grid-column:2;grid-row:1}
.dictation-choice .dictation-selection-actions .dictation-remove{position:static;min-width:38px;min-height:38px;font-size:22px}
.dictation-selection-actions .dictation-move{min-width:38px;min-height:38px;border:1px solid #c9d9cd;border-radius:8px;background:white;color:#174c3d;font-size:20px}
.dictation-selection-actions .dictation-move:disabled{opacity:.35}
#dictationRound{text-align:center;padding:24px}#dictationRound .dictation-round-head{display:grid;justify-items:center;gap:14px}
#dictationProgress{font-size:clamp(24px,5vw,40px)!important}#dictationAudioStatus{font-size:18px!important}
#dictationReplay{min-height:64px!important;padding:14px 24px!important;font-size:20px}
#dictationReplay:disabled{opacity:.55}#dictationRound .dictation-round-actions{justify-content:center}
#dictationRound #dictationNext{min-height:54px;padding:12px 22px}
#dictationPause[hidden],#dictationStop[hidden],#dictationRepeats:has(option)[hidden]{display:none!important}
#dictationSetup label[hidden]{display:none!important}
.sentence-stroke-pager{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:14px;color:#36584e;font-size:.9rem}
.sentence-stroke-pager[hidden]{display:none}
.sentence-stroke-pager button{min-height:40px;padding:8px 12px;border:1px solid #cfddd4;border-radius:10px;background:#fff;color:#215c4b;cursor:pointer}
.sentence-stroke-pager button:disabled{opacity:.5;cursor:default}
.pdf-save-hint{margin:9px 2px 0;color:#52675b;font-size:12px;line-height:1.5;text-align:center}
@media print{.pdf-save-hint{display:none!important}}

@media screen {
  #sentenceMode .sentence-input-wrap { position:relative; flex:1 1 0; min-width:0; width:100%; }
  #sentenceMode .sentence-input-wrap #sentenceInput { display:block; width:100%; min-width:0; padding-right:62px!important; }
  #sentenceMode .sentence-input-wrap #clearSentenceInput {
    position:absolute; right:10px; left:auto; top:50%; bottom:auto;
    transform:translateY(-50%); z-index:2; margin:0;
    display:grid; place-items:center; width:40px; height:40px; min-width:40px; min-height:40px;
  }
  #sentenceMode .sentence-input-wrap #clearSentenceInput[hidden] { display:none!important; }
  #sentenceMode .sentence-result-top { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:10px; }
  #sentenceMode .sentence-result-hanzi { min-width:0; overflow-wrap:anywhere; }
  #sentenceMode .sentence-result-actions { display:inline-flex; align-items:center; gap:6px; justify-self:end; flex:none; }
  #sentenceMode #sentenceAudioBtn,
  #sentenceMode #clearSentenceResult { display:grid; place-items:center; width:44px; height:44px; min-width:44px; min-height:44px; padding:0; margin:0; border-radius:8px; font-size:19px; line-height:1; }
  #sentenceMode #clearSentenceResult { border:1px solid #e4b4b4; background:#fff; color:#a82424; font-size:26px; }
  #sentenceMode #clearSentenceResult:hover { background:#fff0f0; }
  #sentenceMode #clearSentenceResult:focus-visible { outline:2px solid #b8322c; outline-offset:2px; }
  @media (max-width:760px) {
    #sentenceMode .sentrow { display:flex; flex-direction:column; }
    #sentenceMode .sentence-input-wrap { flex:none; width:100%; }
    #sentenceMode .sentence-input-wrap #clearSentenceInput { width:44px; height:44px; min-width:44px; min-height:44px; }
  }
}
/* Official monochrome mark on the A4 sheet; total header spacing stays 10 mm. */
body .phase4-page-header{height:10mm;margin-bottom:0}
body .phase4-print-logo{display:block;width:25mm;height:auto;max-height:9mm;object-fit:contain;filter:none}