/* Compact English learning sheets. Desktop and other language studios keep
   their existing layout; controls and answer fields must remain usable. */
@media (max-width: 600px) {
  #pg-content, #vg-content, #gg-content,
  #lg-content, #sg-content, #wg-content {
    width: calc(100% - 24px);
    max-height: 88vh;
    max-height: min(88dvh, calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 24px));
    padding: 14px;
    border-radius: 18px;
    font-size: 14px;
    overscroll-behavior: contain;
    overflow-wrap: anywhere;
  }

  .pg-hdr, .vg-hdr, .gg-hdr, .lg-hdr, .sg-hdr, .wg-hdr {
    gap: 6px;
    margin-bottom: 10px;
  }

  .pg-hdr-t, .vg-hdr-t, .gg-hdr-t,
  .lg-hdr-t, .sg-hdr-t, .wg-hdr-t {
    min-width: 0;
    font-size: 16px;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }

  .pg-back, .pg-x, .vg-back, .vg-x, .gg-back, .gg-x,
  .lg-back, .lg-x, .sg-back, .sg-x, .wg-back, .wg-x {
    min-width: 44px;
    min-height: 44px;
    flex-shrink: 0;
    touch-action: manipulation;
  }

  .pg-btn, .vg-btn, .gg-btn, .lg-btn, .sg-btn, .wg-btn,
  .gg-choice, .pg-choice, .lg-choice {
    min-height: 44px;
    padding: 9px 12px;
  }

  .vg-mcard, .gg-mcard, .sg-mode-card {
    min-width: 0;
    padding: 12px 8px;
    border-radius: 13px;
  }

  .vg-mc-emoji, .gg-mc-emoji, .sg-mode-emoji { font-size: 26px; }
  .vg-modes, .gg-modes, .sg-mode-cards { gap: 8px; }

  .pg-topic, .gg-topic, .sg-topic, .wg-topic, .lg-scenario,
  .pg-card, .wg-card, .sg-topic-info {
    padding: 11px 12px;
    border-radius: 12px;
    margin-bottom: 8px;
  }

  .gg-quiz-q { font-size: 16px; padding: 12px 6px; }
  .gg-explanation { font-size: 14px; line-height: 1.6; }
  .pg-card-text, .pg-question, .wg-card-text { line-height: 1.5; }
  .pg-answer-entry > div { grid-template-columns: 1fr; }
  .pg-answer-input { min-width: 0; font-size: 18px; }

  .vg-sp-area { padding: 8px 0; }
  .vg-sp-mean { font-size: 24px; }
  .vg-sp-hint { font-size: 14px; }
  .vg-sp-label { font-size: 14px; margin-top: 10px; }

  /* Text input must stay >=16px (including iOS), not scale with the sheet. */
  #vgSpIn { font-size: 18px; }
  #gg-fill-input, .sg-input, .wg-textarea,
  .sg-review-turn textarea { font-size: 16px; }

  .sg-input-row { gap: 6px; }
  .sg-input { min-width: 0; padding-inline: 10px; }
  .sg-send-btn { min-width: 44px; min-height: 44px; padding-inline: 12px; flex-shrink: 0; }
  .sg-voice-keyboard-btn, .sg-voice-switch-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    flex-shrink: 0;
  }

  /* Guided speech previously used negative margins tied to 20px padding.
     Keep the dock within the compact sheet. The more-specific free-chat
     rule in studio_main.html still keeps its controls in normal flow. */
  #sg-content .sg-voice-area {
    margin-inline: -14px;
    margin-bottom: -14px;
    padding-inline: 14px;
  }

  .uj-dialog {
    width: calc(100vw - 24px);
    max-height: min(90dvh, calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 24px));
    border-radius: 18px;
  }
  .uj-head { padding: 14px; gap: 10px; }
  .uj-body { padding: 14px 14px max(14px, env(safe-area-inset-bottom, 0px)); }
  .uj-head h2 { font-size: 19px; }
  .uj-head p { font-size: 13px; }
  .uj-next { padding: 10px 12px; margin-bottom: 12px; }
  .uj-next h3 { font-size: 16px; }
  .uj-stop { padding: 10px; }
  .uj-stop strong { font-size: 14px; }
  .uj-summary { padding: 10px 12px; }
}