/* Shared mobile defaults. Desktop layouts and game-specific touch handlers stay in their feature styles. */
.study-highlight{padding:1px 4px;border-radius:4px;line-height:inherit;white-space:normal;font-weight:600;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.study-highlight-example{background:#b7ffd7;color:#123c2b}
.study-highlight-keyword{background:#ffe997;color:#463708}
.study-highlight-term{background:#c7ddff;color:#1c385a}
@media (max-width:1024px){
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea{font-size:16px!important;min-height:44px;max-width:100%;box-sizing:border-box}
}
@media (max-width: 760px) {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-block: 90px 24px; }
  body { min-width: 0; }
  :where(main, section, article, aside, header, footer, nav, form, fieldset, .card, .panel) { min-inline-size: 0; }
  :where(h1, h2, h3, h4, p, li, label, button, a, th, td) { overflow-wrap: anywhere; }
  :where(img, video, canvas, audio) { max-inline-size: 100%; }
  :where(button, a, input, select, textarea, summary) { scroll-margin-block: 96px 24px; }

  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
  select, textarea {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    min-height: 44px;
    font-size: 16px !important;
    line-height: 1.5;
  }
  textarea { min-height: 96px; }
  button, .button, .primary-button, .secondary-button, .speech-button, .g-button {
    min-width: 44px;
    min-height: 44px;
    touch-action: manipulation;
  }
  .button, .primary-button, .secondary-button, .speech-button, .g-button,
  .text-button, .text-link { font-size: 14px; line-height: 1.7; }
  .text-link { min-height: 44px; align-items: center; }
  .icon-button { min-width: 44px; min-height: 44px; }
  summary { min-height: 44px; align-content: center; }
  button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
  textarea:focus-visible, summary:focus-visible { outline-offset: 3px; }

  .header { height: auto; min-height: 66px; gap: 12px; flex-wrap: wrap; padding-block: 14px; }
  .header .hub-nav {
    display: flex;
    order: 3;
    flex-basis: 100%;
    max-width: 100%;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 6px;
    padding-block: 4px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }
  .header .hub-nav a { display: inline-flex; align-items: center; flex: 0 0 auto; min-height: 44px; padding: 8px 11px; font-size: 14px; white-space: nowrap; border-radius: 7px; }
  .header .hub-nav a:focus-visible { outline-offset: -2px; }
  .header-right { flex-shrink: 0; }
  .sidebar:has(nav button) { height: auto; min-height: 65px; flex-wrap: wrap; padding-block: 10px; }
  .sidebar nav:has(button) { flex-basis: 100%; margin: 0; max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
  .sidebar nav button { flex-shrink: 0; min-width: 44px; min-height: 44px; }
  .breadcrumbs { display: flex; flex-wrap: wrap; line-height: 1.8; }
  .breadcrumbs a { display: inline-flex; align-items: center; min-height: 36px; }

  .muted, .g-muted, .g-hint, .editor-help, .study-help, .match-help,
  .subtitle, .form-help, .help-text, .storage-warning { font-size: 14px; line-height: 1.9; }
  .page-kicker, .eyebrow { font-size: 11px; line-height: 1.7; }
  .g-badge, .status { font-size: 12px; line-height: 1.7; }
  .g-panel h2 { font-size: 20px; }
  .g-level-preview, .g-level-preview p, .g-reading p, .g-feedback p { font-size: 15px; line-height: 1.9; }

  .page-heading p, .section-heading p, .concept-paragraph, .translation,
  .example-analysis, .foundation-short-lines, .foundation-topic-note,
  .foundation-key-note, .foundation-translation, .foundation-analysis,
  .sentence-intro, .sentence-verb-note, .sentence-rate-source,
  .sentence-rate-note, .sentence-priority-card p, .foundation-check-prompt,
  .foundation-feedback p, .foundation-next p, .input-guide,
  .review-explanation, .availability-note { font-size: 14px !important; line-height: 1.95; }
  .concept-paragraph { font-size: 16px !important; line-height: 2; }
  .foundation-card h4 small, .foundation-comparison p,
  .sentence-token-row small, .sentence-symbols, .foundation-progress-note,
  .course-footer, .toc-caption { font-size: 12px !important; line-height: 1.8; }
  .foundation-switch button, .foundation-options button, .foundation-check-nav button,
  .foundation-feedback button, .example-listen { font-size: 14px; min-height: 44px; }
  .foundation-switch { flex-wrap: wrap; }
  .foundation-switch button { flex: 1 1 85px; }
  .foundation-check-nav > span { font-size: 13px; }
  .sentence-rate-label, .sentence-pattern-table table, .rule-table th, .rule-table td { font-size: 13px; line-height: 1.8; }
  .sentence-priority-card h4 { font-size: 15px; }
  .tree-lesson { font-size: 14px; }
  .tree-lesson small { font-size: 12px; }
  .word-bank button, .word-answer button { min-height: 44px; font-size: 16px; }

  dialog { max-inline-size: calc(100vw - 24px); max-block-size: calc(100dvh - 24px); overflow-y: auto; box-sizing: border-box; }
  .modal { max-inline-size: calc(100vw - 24px); max-block-size: calc(100dvh - 24px); overflow-y: auto; }
  .modal-overlay, .dialog-backdrop { padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); }
  .touch-controls { grid-template-columns: repeat(3, minmax(44px, 1fr)); gap: 8px; padding-bottom: env(safe-area-inset-bottom); }
  .match-table-wrap, .rule-table, .score-table { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .quick-fields, .conversation-composer, .match-form { min-width: 0; }
}

@media (max-width: 420px) {
  .header .hub-nav a { padding-inline: 9px; }
  .quick-fields { display: flex; flex-wrap: wrap; }
  .quick-fields > input { flex: 1 1 100%; }
  .quick-fields > button { flex: 1 1 100%; }
  .match-table { font-size: 13px; }
  .sentence-pattern-table th, .sentence-pattern-table td { padding-inline: 6px; }
}