/* Screen layout only: search, recognition, exercise flow and print remain in their modules. */
@media screen and (max-width: 760px) {
  :root { --text-body:16px; --text-label:14px; --text-help:14px; --text-button:14px; }
  html { -webkit-text-size-adjust:100%; scroll-padding-top:16px; }
  .wrap { width:100%; padding-inline:16px; }
  .top { height:auto; min-height:0; }
  .nav { flex-wrap:wrap; gap:12px; padding-block:14px; }
  .brand { margin-right:0; padding-right:0; border-right:0; }
  .navlinks { width:100%; min-width:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
  .navlinks .nav-tab,.navlinks>a { min-width:0; min-height:48px; padding:8px 4px; white-space:normal; font-size:13px; line-height:1.35; text-align:center; }
  .navright { display:none; }
  .hero { min-height:0; margin:18px 0; padding:26px 20px; border-radius:16px; }
  .hero>div { min-width:0; max-width:100%; }
  .hero h1 { font-size:clamp(28px,7.5vw,38px); line-height:1.15; overflow-wrap:break-word; }
  .hero p,.hero .lead { font-size:16px; line-height:1.65; }
  .layout { grid-template-columns:minmax(0,1fr); gap:16px; padding-bottom:28px; }
  .leftcol,.rightcol,.card,.pane,.content { min-width:0; max-width:100%; }
  .card,.layout.view-dictation #dictationPanel { padding:20px 16px; }
  #practicar .workspace { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:20px; }
  .pane,#practicar .pane { padding:16px; }
  .cardhead { flex-wrap:wrap; gap:8px; }
  .tabs { gap:20px; flex-wrap:wrap; }
  .inputrow,.sentrow,.worksheet-search-row,.dictation-add-row { display:flex; flex-direction:column; align-items:stretch; gap:10px; }
  .dictation-input-wrap { width: 100%; }
  .inputrow>*,.sentrow>*,.worksheet-search-row>*,.dictation-add-row>* { min-width:0; max-width:100%; }
  .inputrow>.primary,.sentrow>.primary,.worksheet-search-row>.primary,.dictation-add-row>.primary { width:100%; min-height:48px; }
  input,textarea,select { font-size:16px; }
  .iconbtn,.audio-btn,.dictation-word-audio { min-width:44px; min-height:44px; }
  .controls,.stroke-display-controls { flex-wrap:wrap; gap:12px; }
  .stroke-display-controls label { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
  .stroke-display-controls select,.dictation-controls select { min-height:44px; font-size:16px; max-width:100%; }
  .autocomplete,.hanzi-suggestions,.vocab-suggestions { max-width:100%; max-height:320px; max-height:min(320px,45svh); overflow-y:auto; overscroll-behavior:contain; }
  .autocomplete button,.hanzi-suggestion { min-height:48px; white-space:normal; overflow-wrap:anywhere; }
  .wordinfo { flex-wrap:wrap; min-width:0; }
  .meaning,.pinyin,.sentence-result-hanzi,.example-sentence-row .han { overflow-wrap:anywhere; }
  .sentence-result-top,.example-sentence-row { flex-wrap:wrap; align-items:flex-start; }
  .example-actions { width:100%; min-width:0; flex-direction:row; flex-wrap:wrap; }
  .example-actions button { min-height:44px; flex:1 1 120px; }
  .sentence-result,.dictation-answer-card { padding:16px; }
  .sentence-segment { grid-template-columns:minmax(52px,max-content) minmax(0,1fr); }
  .sentence-stroke-grid { max-width:100%; }
  .privacy-examples { padding:14px; overflow-wrap:anywhere; }
  #worksheetPanel .worksheet-character-details { grid-template-columns:repeat(2,minmax(0,1fr)); padding:16px; gap:16px; }
  .worksheet-stroke-pane { border-top:1px solid #dce5df; padding-top:14px; }
  .worksheet-stroke-heading { flex-wrap:wrap; }
  #worksheetPanel .worksheet-detail-remove { min-height:44px; padding:8px 14px; }
  .worksheet-word-chip button { min-height:44px; }
  .worksheet-actions { grid-template-columns:minmax(0,1fr); }
  .worksheet-actions button { width:100%; min-height:48px; white-space:normal; }
  .dictation-choice { grid-template-columns:minmax(0,1fr); padding:16px; }
  .dictation-choice-strokes { grid-column:1; grid-row:auto; justify-content:center; max-width:100%; flex-wrap:wrap; }
  .dictation-choice .dictation-remove { top:4px; right:4px; width:44px; height:44px; }
  .dictation-choice-stroke-wrap:first-child .dictation-choice-stroke-replay { right:52px; }
  .dictation-selection-head { flex-wrap:wrap; gap:6px; }
  #dictationAnswerList { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .dictation-controls label { width:100%; justify-content:space-between; flex-wrap:wrap; gap:8px; }
  #dictationStart { width:100%; margin-left:0; min-height:48px; }
  .dictation-round-actions button { min-height:48px; white-space:normal; }
  .about-page .content { padding:22px 18px; margin-bottom:28px; }
  .about-page .grid { grid-template-columns:minmax(0,1fr); gap:12px; }
  .about-page .feature { padding:20px; }
  .about-page .section>p,.about-page .feature p { text-align:left; }
  .foot { padding:24px 16px; }
  .foot nav { display:flex; flex-wrap:wrap; justify-content:center; gap:4px 16px; }
  .foot nav a { display:inline-flex; align-items:center; min-height:44px; }
  .legal-page main { margin:16px 12px; padding:24px 18px; overflow-wrap:anywhere; }
  .legal-page nav { display:flex; flex-wrap:wrap; }
  .legal-page nav a { min-height:44px; display:inline-flex; align-items:center; }
  .legal-page table { display:block; max-width:100%; overflow-x:auto; }
}
@media screen and (max-width:600px) {
  #practicar .workspace,#worksheetPanel .worksheet-character-details,#dictationAnswerList { grid-template-columns:minmax(0,1fr); }
}
@media screen and (max-width:600px) {
  body>#handwritingPanel {
    top:8px; left:50%; transform:translateX(-50%); width:calc(100% - 16px);
    height:calc(100dvh - 16px); max-height:calc(100dvh - 16px);
    padding:12px; gap:8px; border-radius:14px; overflow-y:auto;
    padding-bottom:max(12px,env(safe-area-inset-bottom));
  }
  body>#handwritingPanel .handwriting-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
  body>#handwritingPanel .handwriting-head strong { font-size:14px; line-height:1.4; }
  body>#handwritingPanel .handwriting-head button { min-width:64px; min-height:44px; flex:none; }
  body>#handwritingPanel .handwriting-canvas { width:min(250px,34dvh,100%); height:min(250px,34dvh); aspect-ratio:1; margin:0 auto; }
  body>#handwritingPanel .handwriting-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
  body>#handwritingPanel .handwriting-actions button { min-width:0; min-height:44px; padding:8px; white-space:normal; font-size:13px; }
  body>#handwritingPanel #handwritingStatus { height:48px; min-height:48px; font-size:13px; }
  body>#handwritingPanel #handwritingResults { flex:1 0 96px; min-height:96px; height:96px; grid-template-columns:repeat(5,minmax(0,1fr)); grid-auto-rows:44px; overflow-y:auto; }
  body>#handwritingPanel .handwriting-candidate { height:44px; min-width:0; font-size:24px; }
}
@media screen and (max-width:360px) {
  .wrap { padding-inline:10px; }
  .hero { padding:22px 16px; }
  .card,.layout.view-dictation #dictationPanel { padding:18px 12px; }
  .navlinks .nav-tab,.navlinks>a { font-size:12px; }
}
/* Anchor clear controls to the input's first row, not to the stacked action. */
@media screen and (max-width:760px) {
  .inputrow,.sentrow,.worksheet-search-row { position:relative; }
  #characterMode #clearCharacterInput,
  #sentenceMode #clearSentenceInput,
  #worksheetPanel #clearWorksheetInput {
    position:absolute; right:5px; left:auto; top:27px; bottom:auto;
    transform:translateY(-50%); width:44px; height:44px; min-height:44px;
    padding:0; display:grid; place-items:center; margin:0; z-index:2;
  }
  #hanziInput,#sentenceInput,#worksheetCharacterInput { padding-right:54px!important; }
  .tabs .tab { min-height:44px; }
  .sentence-stroke-replay,.worksheet-detail-replay,
  .dictation-choice-stroke-replay { min-width:44px; min-height:44px; }
  .sentence-stroke-char { padding-top:52px; }
  #worksheetPanel #worksheetWriterTarget .stroke-character { padding-top:52px; }
  .dictation-choice-stroke-wrap { padding-top:52px; }
  code,pre { overflow-wrap:anywhere; word-break:break-word; white-space:pre-wrap; }
}
/* The canvas always keeps its drawing coordinate system square. */
body>#handwritingPanel .handwriting-canvas {
  width:min(280px,38vh,100%); height:auto; aspect-ratio:1;
}
@media screen and (max-width:600px) {
  body>#handwritingPanel .handwriting-canvas {
    width:min(250px,34dvh,100%); height:auto; aspect-ratio:1;
  }
}
@media screen and (min-width:601px) and (max-height:500px) {
  body>#handwritingPanel {
    top:8px; height:calc(100dvh - 16px); max-height:calc(100dvh - 16px);
    padding:12px; gap:8px 16px; overflow:hidden;
    grid-template-columns:minmax(0,1fr) minmax(180px,240px);
    grid-template-rows:44px minmax(0,1fr) auto 44px;
  }
  body>#handwritingPanel .handwriting-canvas {
    width:min(200px,calc(100dvh - 210px),100%); height:auto;
  }
  body>#handwritingPanel .handwriting-actions {
    display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px;
  }
  body>#handwritingPanel .handwriting-actions button {
    min-width:0; min-height:44px; padding:4px; font-size:12px; white-space:normal;
  }
  body>#handwritingPanel #handwritingStatus { height:44px; min-height:0; }
  body>#handwritingPanel #handwritingResults { height:100%; min-height:0; }
}