/* Phone layout only. Screens wider than 800px keep the desktop arrangement. */
@media (max-width: 800px) {
  html, body { max-width: 100%; overflow-x: hidden; overflow-x: clip; }
  body { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }

  header {
    height: auto;
    min-height: 56px;
    padding: 10px 12px;
    gap: 8px;
  }
  header > strong { font-size: 22px; }
  body > header span { display: none !important; }

  main { display: block; height: auto; overflow: visible; }
  main > aside {
    height: auto;
    max-height: none;
    overflow: visible;
    border-right: 0;
    border-bottom: 2px solid var(--black);
  }
  .entries {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    height: 40vh;
    min-height: 200px;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior: contain;
  }
  .entry {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .entry strong,
  .entry small {
    display: block;
    max-width: 100%;
    overflow: visible;
    white-space: normal;
    text-overflow: unset;
    -webkit-line-clamp: unset;
    -webkit-box-orient: unset;
    overflow-wrap: anywhere;
  }
  .workspace {
    height: auto;
    overflow: visible;
    padding: 18px 14px 28px;
  }
  h1, .wl-head h1 { font-size: 32px !important; letter-spacing: -0.03em; }
  .meaning { font-size: 22px; }
  .context { display: block; }
  .context-card { margin-bottom: 12px; transform: none !important; }
  .panel { padding: 18px 14px; }
  .panel:before, .panel:after { display: none; }
  .panel h2 { max-width: none; font-size: 28px; }
  .actions { flex-direction: column; align-items: stretch; }
  .primary, .secondary { width: 100%; }
  blockquote { font-size: 24px; }
  textarea, audio, video, img, pre { max-width: 100%; }

  .mode-nav {
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    transform: none;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    padding: 4px 2px calc(4px + env(safe-area-inset-bottom));
    border-width: 2px 0 0;
    box-shadow: none;
  }
  .mode-nav button {
    padding: 8px 2px;
    font-size: 14px;
    letter-spacing: 0;
    line-height: 1.15;
    white-space: normal;
  }

  .wordlink-view { display: block; height: auto; overflow: visible; }
  .wl-sidebar {
    height: auto;
    max-height: none;
    overflow: visible;
    border-right: 0;
    border-bottom: 2px solid var(--black);
  }
  .wl-articles {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    height: 40vh;
    min-height: 200px;
    max-height: none;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior: contain;
  }
  .wl-article, .wl-article strong, .wl-article small {
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .wl-workspace { height: auto; overflow: visible; padding: 16px 14px 24px; }
  .wl-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .wl-grid, .wl-detail-grid { grid-template-columns: 1fr; }
  .wl-transcript, .wl-vocab-list { height: auto; max-height: 46vh; }
  .wl-detail-title { align-items: flex-start; flex-direction: column; gap: 10px; }

  .wordbank-workspace, .reviewplan-workspace, .wordbank-right, .reviewplan-main {
    display: block;
    height: auto;
    overflow: visible;
  }
  .wordbank-sidebar, .reviewplan-calendar {
    height: auto;
    max-height: none;
    overflow: visible;
    border-right: 0;
    border-bottom: 3px solid var(--black);
    padding: 14px 12px 16px;
  }
  .wordbank-results {
    flex: 0 0 auto;
    width: 100%;
    height: 46vh;
    min-height: 240px;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior: contain;
  }
  .wordbank-card {
    min-width: 0;
    height: auto;
  }
  .wordbank-card strong, .wordbank-card small {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    overflow-wrap: anywhere;
  }
  .wordbank-practice { overflow: visible; padding: 16px 14px 24px; }
  .wordbank-practice-head, .daily-review-head, .wordbank-head-actions, .review-summary-actions {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }
  .wordbank-filters { grid-template-columns: 1fr; }
  .wordbank-filters select, .review-summary-actions select {
    width: 100%;
    font-size: 16px;
  }
  .wordbank-word-row { grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 8px; }
  .wordbank-word-row h3 { font-size: 34px; }
  .wordbank-detail-grid, .daily-detail-grid, .daily-word-groups, .daily-word-groups.three-groups, .history-evaluation, .history-summary, .wl-detail-grid {
    grid-template-columns: 1fr;
  }
  .wordbank-study-card,
  .wordbank-detail-scroll,
  .daily-word-groups.daily-only,
  .daily-word-groups.daily-only .daily-word-group > div {
    flex: none;
    height: auto;
    max-height: none;
    overflow: visible;
  }
  .wordbank-detail-grid,
  .wl-detail-grid,
  .daily-detail-grid {
    height: auto;
    grid-template-rows: none;
    grid-auto-rows: max-content;
    align-content: start;
  }
  .wordbank-detail-grid article,
  .wl-detail-grid article,
  .daily-detail-grid article {
    height: auto;
    min-height: 0;
    overflow: visible;
  }
  .review-article-text,
  .wordbank-article-text {
    height: auto;
    max-height: 52vh;
  }
  .daily-review-head > div.review-summary-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    justify-content: stretch;
    gap: 8px;
    width: 100%;
  }
  .daily-review-head h2 {
    margin: 0;
    font-size: 26px;
    line-height: 1.3;
    overflow-wrap: normal;
    word-break: keep-all;
  }
  .daily-review-head .review-summary-actions button,
  .daily-review-head .review-summary-actions label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 10px 8px;
    font-size: 15px;
    line-height: 1.2;
    white-space: nowrap;
  }
  .daily-review-head .review-summary-actions select {
    width: 72px;
    flex: 0 0 auto;
    margin: 0;
    font-size: 16px;
  }
  .daily-review-head .review-summary-actions > span {
    grid-column: 1 / -1;
    font-size: 13px;
    line-height: 1.4;
    white-space: normal;
  }
  .review-pool.wordbank-review {
    height: auto;
    min-height: 0;
    grid-template-rows: none;
  }
  .wordbank-review, .review-pool.wordbank-review {
    display: block;
    margin: 12px;
    overflow: visible;
  }
  .review-pool.wordbank-review > .review-own-list,
  .review-own-list {
    max-height: 240px;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior: contain;
  }
  .review-own-list button {
    height: auto;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .review-pool.wordbank-review > .review-task {
    padding-left: 0;
    border-left: 0;
    border-top: 2px solid var(--black);
    overflow: visible;
  }
  .review-task .wordbank-review-meta, .review-modal .wordbank-review-meta,
  .review-task .wordbank-review-answer, .review-modal .wordbank-review-answer,
  .wordbank-review-answer, .review-history li {
    grid-template-columns: 1fr;
  }
  .review-task .review-primary-mic, .review-modal .review-primary-mic {
    width: 100%;
    min-width: 0;
  }
  .review-modal { max-width: calc(100vw - 20px); max-height: 86vh; overflow: auto; }
}