/* ============================================================
   Responsive — mobile usability.
   Breakpoints: 900 / 768 / 640 / 480.
   This file must load LAST: the iOS-zoom rule below relies on
   link order to cascade after the base input styles.
   ============================================================ */

@media (max-width: 900px) {
  .main-layout {
    grid-template-columns: 1fr;
    gap: 16px;
    margin: 1rem auto 2rem;
    padding: 0 1rem;
  }
}

@media (max-width: 768px) {
  .header-container { padding: 0.6rem 1rem; }
  .panel { padding: 1.15rem 1.1rem; }
  #captionEditor { min-height: 220px; }

  /* Prevent iOS zoom-on-focus (inputs must be >= 16px on small screens) */
  input, select, textarea,
  .form-group input,
  .form-group select,
  #captionEditor { font-size: max(16px, 1rem); }

  /* Touch targets >= 44px on the primary list of controls */
  .tab-btn { min-height: 44px; }
  .variation-menu button { min-height: 44px; }
  .thought-panel summary { min-height: 44px; }
  .emoji-chip { min-height: 40px; }
  .preset-btn { min-height: 44px; }
  .thumbnail-remove { width: 28px; height: 28px; font-size: 14px; }

  /* Tabs scroll horizontally instead of wrapping */
  .tabs-nav { overflow-x: auto; scrollbar-width: none; }
  .tabs-nav::-webkit-scrollbar { display: none; }
  .tab-btn { flex: 1 0 auto; }
}

@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
  .form-group.full-width { grid-column: span 1; }
  .action-button-row { grid-template-columns: 1fr; }
  .btn-action { min-height: 48px; }

  /* Auto-expanded thought panel: keep it from dominating a small screen */
  .thought-content { max-height: 200px; }

  .upload-container { padding: 1.5rem 1rem; }

  .editor-status-bar { font-size: 0.7rem; }

  .meta-card-footer { flex-direction: column; align-items: stretch; }
  .meta-publish-btn { justify-content: center; }
  .meta-note { text-align: center; }

  /* Toasts become full-width bottom sheets above the home indicator */
  .toast-container {
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    max-width: none;
  }
  .toast { max-width: none; }

  .modal-overlay { padding: 12px; }
  .modal-header, .modal-body { padding-left: 16px; padding-right: 16px; }
  .modal-footer { padding: 12px 16px; }
}

@media (max-width: 480px) {
  .brand-titles .brand-sub { display: none; }
  .brand-titles .brand-name { font-size: 0.95rem; }
  .header-container { gap: 0.5rem; }

  /* Header pills collapse to icon-only (state stays in the icon) */
  .action-pill { padding: 0.45rem 0.6rem; min-width: 40px; }
  .action-pill .pill-label { display: none; }

  .header-tools { flex-direction: column; align-items: flex-end; gap: 6px; }

  .panel { padding: 1rem 0.9rem; border-radius: var(--radius-md); }
  .panel-header { flex-wrap: wrap; }
  .panel-header h2 { font-size: 1.05rem; }
}