/* Keep the desktop layout while making every study view usable on phones. */
.dashboard-search {
  min-width: 280px;
}

button, .unit-card, .mode-card, .practice-option-card {
  touch-action: manipulation;
}

@media (max-width: 1050px) {
  .app-header {
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .dashboard-hero, .section-header-bar, .workspace-header-bar,
  .learning-area-header, .lesson-reader-card, .study-top-bar {
    flex-wrap: wrap;
    gap: 1rem;
  }

  .hero-stats {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
  }

  .hero-stat-card {
    min-width: 0;
  }

  .modes-selection-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .practice-cards-grid {
    grid-template-columns: 1fr;
  }

  .study-tools {
    flex-wrap: wrap;
  }

  .study-controls {
    flex-wrap: wrap;
  }
}

@media (max-width: 640px) {
  body {
    -webkit-text-size-adjust: 100%;
  }

  .app-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 0.75rem max(0.75rem, env(safe-area-inset-right))
      0.5rem max(0.75rem, env(safe-area-inset-left));
    gap: 0.65rem;
  }

  .brand {
    min-width: 0;
    gap: 0.5rem;
  }

  .brand-icon {
    flex-shrink: 0;
  }

  .brand-text span {
    font-size: 0.65rem;
    letter-spacing: 0;
  }

  .header-actions {
    grid-column: 2;
    grid-row: 1;
    gap: 0.35rem;
  }

  .app-header > .nav-modules {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .nav-tab {
    justify-content: center;
    padding: 0.5rem 0.3rem;
    font-size: 0.8rem;
  }

  .main-content {
    padding: 1rem max(0.75rem, env(safe-area-inset-right))
      max(2rem, env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left));
  }

  .dashboard-hero, .unit-detail-header, .workspace-header-bar,
  .learning-area-card, .practice-section-container, .lesson-reader-card,
  .results-header-card, .results-review-section {
    padding: 1rem;
  }

  .hero-text h2 {
    font-size: 1.25rem;
  }

  .hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }

  .hero-stat-card {
    padding: 0.75rem 0.5rem;
  }

  .section-title {
    flex-wrap: wrap;
    font-size: 1.05rem;
  }

  .dashboard-search, .section-header-bar, .unit-detail-header,
  .workspace-header-bar, .learning-area-header, .lesson-reader-card,
  .study-top-bar, .practice-top-bar, .review-header-bar {
    width: 100%;
    min-width: 0;
  }

  .dashboard-search {
    flex: 1 1 100%;
  }

  .units-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
  }

  .unit-detail-header, .workspace-header-bar, .learning-area-header,
  .lesson-reader-card, .study-top-bar, .practice-top-bar, .review-header-bar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  .unit-detail-header > div:last-child {
    text-align: left !important;
  }

  .modes-selection-grid {
    gap: 0.5rem;
  }

  .mode-card {
    min-width: 0;
    padding: 0.8rem;
    overflow-wrap: anywhere;
  }

  .mode-card h3 {
    font-size: 0.95rem;
  }

  .mode-card-stat, .pfunc-meta, .practice-heading-left,
  .study-info-badge, .card-top-meta, .back-term, .fb-header,
  .fb-target-detail, .results-action-buttons, .review-filter-tabs {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .workspace-scope-pills {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-radius: var(--radius-md);
  }

  .scope-pill {
    padding: 0.5rem;
  }

  .area-title-group {
    align-items: flex-start;
    gap: 0.75rem;
  }

  .area-stats-action {
    align-items: stretch;
    text-align: left;
  }

  .lesson-reader-card > div:last-child {
    flex-wrap: wrap;
  }

  .study-tools {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }

  .study-tools .btn-tool {
    justify-content: center;
  }

  .flashcard-scene {
    height: 400px;
    height: clamp(340px, 55svh, 440px);
  }

  .card-front, .card-back {
    padding: 1.1rem;
    border-radius: var(--radius-lg);
  }

  .card-front {
    overflow-y: auto;
  }

  .card-back > * {
    flex-shrink: 0;
  }

  .card-center-content {
    width: 100%;
    overflow-wrap: anywhere;
  }

  .chinese-char-lg {
    font-size: clamp(2.1rem, 11vw, 3.25rem);
    line-height: 1.3;
  }

  .back-header {
    align-items: flex-start;
    gap: 0.5rem;
  }

  .back-header > div:last-child {
    flex-shrink: 0;
  }

  .back-chinese {
    font-size: 1.75rem;
  }

  .back-pinyin, .pinyin-front {
    font-size: 1.1rem;
  }

  .study-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .nav-buttons-group, .audio-buttons-group {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.4rem;
  }

  .audio-buttons-group {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .btn-nav, .btn-audio {
    justify-content: center;
    padding: 0.65rem 0.35rem;
    font-size: 0.85rem;
  }

  .status-rating-bar {
    gap: 0.4rem;
  }

  .btn-status {
    padding: 0.75rem 0.25rem;
    font-size: 0.8rem;
    justify-content: center;
  }

  .keyboard-hints-footer, .key-hint, .keyboard-shortcut {
    display: none;
  }

  .reader-modal-overlay {
    padding: 0.5rem;
  }

  .reader-modal-window {
    max-height: 92vh;
    max-height: 92dvh;
    border-radius: var(--radius-lg);
  }

  .reader-modal-header, .reader-modal-body {
    padding: 1rem;
  }

  .reader-modal-header {
    align-items: flex-start;
    gap: 0.5rem;
  }

  .reader-modal-header > div, .reader-modal-header .nav-modules {
    flex-wrap: wrap;
    min-width: 0;
  }

  .reader-dialogue-line {
    padding: 0.75rem;
  }

  .reader-dialogue-line > div {
    flex-wrap: wrap;
  }

  .practice-breadcrumb, .practice-progress-box {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .practice-progress-bar {
    flex: 1;
  }

  .practice-card-prompt {
    padding: 1.25rem 1rem;
  }

  .prompt-hanzi-large {
    font-size: clamp(2.25rem, 11vw, 3.25rem);
    overflow-wrap: anywhere;
  }

  .prompt-sentence-box {
    font-size: 1.4rem;
  }

  .practice-options-grid, .results-stats-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
  }

  .practice-option-card {
    min-width: 0;
    padding: 0.9rem 0.65rem;
    gap: 0.5rem;
  }

  .opt-content {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .opt-letter-badge {
    flex-shrink: 0;
  }

  .results-stats-row > :last-child {
    grid-column: 1 / -1;
  }

  .results-action-buttons > button {
    flex: 1 1 100%;
    justify-content: center;
  }

  .rev-answers-comparison {
    flex-direction: column;
    gap: 0.5rem;
  }

  .toast-container {
    left: 0.75rem;
    right: 0.75rem;
    bottom: max(1rem, env(safe-area-inset-bottom));
  }

  input, select, textarea, .search-input-box input {
    font-size: 16px !important;
  }
}

@media (pointer: coarse) {
  button, .btn-tool, .btn-icon {
    min-height: 44px;
  }

  .btn-icon {
    min-width: 44px;
  }
}