/* ---- Responsive / mobile ---- */

/* Never let long words, URLs, code, or wide media force horizontal scrolling. */
html {
  -webkit-text-size-adjust: 100%;
}
img,
pre {
  max-width: 100%;
}
.prose {
  overflow-wrap: break-word;
}
.prose table {
  display: block;
  overflow-x: auto;
}
.topic-card .desc,
.flashcard .front,
.flashcard .back,
.chat .msg {
  overflow-wrap: anywhere;
}

@media (max-width: 720px) {
  .container {
    padding: 1.25rem 1rem;
  }

  h1 {
    font-size: var(--text-xl);
  }
  h2 {
    font-size: var(--text-md);
    margin-top: 1.5rem;
  }

  /* Prevent iOS Safari from zooming when focusing an input. */
  textarea,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="url"],
  select {
    font-size: 16px;
  }

  /* Editor: stack titles above their actions so buttons never overflow. */
  .edit-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
  }
  .edit-topics li {
    flex-direction: column;
    align-items: stretch;
    gap: 0.45rem;
  }
  .edit-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .edit-actions .btn {
    padding: 0.4rem 0.75rem;
    font-size: var(--text-sm);
  }

  /* Tabs scroll horizontally instead of wrapping into several rows. */
  .tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .tabs::-webkit-scrollbar {
    height: 0;
  }
  .tabs button {
    white-space: nowrap;
  }

  .chat .msg {
    max-width: 92%;
  }
  .topic-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 420px) {
  .container {
    padding: 1rem 0.85rem;
  }
  h1 {
    font-size: var(--text-xl);
  }
  /* Stack action rows full-width for comfortable tap targets. */
  .btn-row .btn,
  .btn-row > form,
  .btn-row > form > .btn {
    width: 100%;
  }
}