/* Phone-first overrides.  Landscape phones can be wide enough to otherwise
   accidentally receive the desktop sidebar. */
@media (max-width: 800px), (max-width: 950px) and (max-height: 560px) {
  body { min-width: 0; }

  .app-shell {
    display: block;
    min-height: 100dvh;
  }

  .app-header {
    position: sticky;
    z-index: 30;
    top: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    padding: 12px 16px;
  }

  .header-deck,
  .nav-label,
  .sidebar-footer { display: none; }

  .brand-text {
    overflow: hidden;
    font-size: .8rem;
    letter-spacing: .11em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .header-menu summary {
    min-height: 44px;
    padding: 0 11px;
  }

  .header-menu .app-menu {
    position: fixed;
    top: 64px;
    right: 12px;
    width: min(320px, calc(100vw - 24px));
    max-height: calc(100dvh - 78px);
    overflow: auto;
    padding: 8px;
  }

  .header-menu .app-menu button {
    min-height: 46px;
    padding: 12px;
    font-size: .9rem;
  }

  .sidebar {
    display: block;
    padding: 9px 16px 11px;
  }

  .sidebar nav {
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .sidebar nav::-webkit-scrollbar { display: none; }

  .deck-list {
    display: flex;
    width: max-content;
    min-width: 100%;
    gap: 7px;
    padding: 0;
  }

  .deck-button {
    grid-template-columns: 10px minmax(0, 1fr) auto;
    width: auto;
    min-width: 150px;
    min-height: 44px;
    padding: 10px 12px;
  }

  .content { padding: 24px 16px 42px; }

  .workspace {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
  }

  .study-heading {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 9px 14px;
    margin-bottom: 16px;
  }

  .study-heading h2,
  .progress-heading h2,
  .empty-study h2 { font-size: 1.55rem; }

  .card-count { margin-left: auto; }

  .flashcard {
    min-height: 250px;
    padding: 22px 18px;
    border-radius: 16px;
  }

  .card-meta { gap: 5px 10px; }
  .card-prompt { font-size: clamp(1.65rem, 8vw, 2.05rem); }

  .answer-row { flex-direction: column; }
  .answer-row input,
  .reveal-button { min-height: 48px; }

  .answer-panel { padding: 18px 15px; }
  .self-rate { line-height: 1.5; }
  .rating-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rating-buttons button { min-height: 58px; padding: 9px; }

  .progress-panel { width: 100%; }
  .progress-ring { --size: 132px; }
  .progress-caption { max-width: 240px; }

  .empty-study { padding: 42px 20px; }
  .empty-actions { display: grid; gap: 9px; }
  .empty-actions button { width: 100%; }
}

@media (max-width: 600px) {
  dialog {
    width: 100%;
    max-height: min(84dvh, 760px);
    margin: auto 0 0;
    border-radius: 20px 20px 0 0;
  }

  dialog form,
  .manage-content,
  .match-round-content { padding: 20px 16px; }

  .dialog-header { margin-bottom: 18px; }
  .dialog-header h2 { font-size: 1.35rem; }

  .manage-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .manage-actions button { min-height: 44px; }

  .social-list li { padding: 12px; }
  .social-actions { width: 100%; }
  .social-actions button { flex: 1 1 120px; }
}

@media (max-width: 380px) {
  .app-header,
  .sidebar,
  .content { padding-left: 12px; padding-right: 12px; }

  .brand-text { font-size: .73rem; }
  .header-menu summary { padding: 0 9px; }
  .deck-button { min-width: 136px; }
  .flashcard { min-height: 235px; padding-left: 14px; padding-right: 14px; }
}

@media (max-width: 950px) and (max-height: 560px) {
  .content { padding-top: 18px; padding-bottom: 28px; }
  .flashcard { min-height: 215px; }
  .progress-panel {
    display: grid;
    grid-template-columns: 1fr 132px;
    gap: 0 18px;
    align-items: center;
  }
  .progress-heading { grid-column: 1 / -1; margin-bottom: 15px; }
  .progress-ring { grid-column: 2; grid-row: 2 / span 2; }
  .progress-caption { grid-column: 1; grid-row: 2; margin: 0; text-align: left; }
  .stats { grid-column: 1; grid-row: 3; }
  .next-up { grid-column: 1 / -1; }
}