/* ==========================================================================
   Responsive — one structural breakpoint (sidebar -> drawer) plus
   progressive spacing/type refinement down to 320px.
   ========================================================================== */

/* Prevent any accidental horizontal scroll regardless of content. */
html, body { overflow-x: hidden; max-width: 100%; }
img, canvas, svg, .textarea, .input, pre, .output-code { max-width: 100%; }
.textarea, .output-code, .diff-line, .val { overflow-wrap: anywhere; }

/* ---- Large desktops: let content breathe a little more ---- */
@media (min-width: 1600px) {
  .main-content, .site-footer-inner { max-width: 1400px; }
}

/* ---- Sidebar becomes an off-canvas drawer below 1024px ---- */
@media (max-width: 1023px) {
  .drawer-toggle { display: inline-flex; }
  .hide-on-narrow { display: none; }

  .app-body { grid-template-columns: 1fr; }

  .sidebar {
    position: fixed; top: 0; left: 0; height: 100%; width: min(85vw, 300px);
    transform: translateX(-100%);
    transition: transform .22s ease;
    z-index: 50;
    box-shadow: var(--shadow-lg);
    padding-top: var(--space-4);
  }
  body.drawer-open .sidebar { transform: translateX(0); }

  .sidebar-mobile-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 var(--space-2) var(--space-4); border-bottom: 1px solid var(--border);
    margin-bottom: var(--space-2);
  }

  .main-content { padding: var(--space-6) var(--space-5) var(--space-5); }
  .site-footer-inner { padding: var(--space-5) var(--space-5) var(--space-6); flex-direction: column; align-items: flex-start; text-align: left; }

  .category-grid { grid-template-columns: repeat(2, 1fr); }
  .tool-grid { grid-template-columns: repeat(2, 1fr); }

  .split-view { grid-template-columns: 1fr; }
}

/* ---- Collapse the header search bar into an icon on narrower widths ---- */
@media (max-width: 680px) {
  .topbar-search { display: none; }
  .mobile-search-btn { display: inline-flex; }
  .topbar { gap: var(--space-2); padding: 0 var(--space-4); }
}

/* ---- Phones ---- */
@media (max-width: 640px) {
  .main-content { padding: var(--space-5) var(--space-4) var(--space-4); }
  .site-footer-inner { padding: var(--space-4) var(--space-4) var(--space-6); }

  .category-grid { grid-template-columns: 1fr; }
  .tool-grid { grid-template-columns: 1fr; }

  .hero { padding: var(--space-8) 0 var(--space-6); }
  .hero-search { max-width: 100%; }

  .stats-row { grid-template-columns: 1fr; }
  .stat { padding: var(--space-4) var(--space-5); }

  .section-heading { margin: var(--space-8) 0 var(--space-3); flex-wrap: wrap; }

  .tool-page-header { gap: var(--space-3); }
  .tool-icon-lg { width: 40px; height: 40px; font-size: 17px; }
  .tool-page-header h1 { font-size: 19px; }
  .tool-page-header-actions { width: 100%; }
  .tool-page-header-actions .btn { flex: 1; }

  .toolbar { gap: 6px; }
  .toolbar .btn { flex: 1 1 auto; }

  .stat-mini-row { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .stat-mini { padding: var(--space-3) var(--space-2); }
  .stat-mini-value { font-size: 18px; }

  .color-value-grid { grid-template-columns: 1fr; }

  .field-row { flex-direction: column; gap: var(--space-3); }

  /* Toasts move to bottom-center on small screens */
  .toast-region { left: 12px; right: 12px; bottom: 14px; align-items: center; max-width: none; }
  .toast { width: 100%; max-width: 420px; min-width: 0; }

  .cmdk { top: 8vh; width: 94vw; max-height: 78vh; }
}

/* ---- Very small phones ---- */
@media (max-width: 380px) {
  .logo-text { display: none; }
  .search-kbd { display: none; }
  .stat-value { font-size: 22px; }
  .tool-page-header-actions { flex-direction: column; }
}