/* ============================================================
   Mint responsive layer — tablets and phones.
   Breakpoints: 1024 (sidebar becomes a drawer), 900 (two-column grids
   collapse), 720 (key/value grids), 640 (phones: modals become sheets,
   search collapses). Coarse pointers get larger hit targets.
   ============================================================ */

/* Sidebar drawer */
.sidebar-overlay { display: none; position: fixed; inset: 0; background: var(--overlay); z-index: 80; }
@media (max-width: 1024px) {
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 85; width: min(300px, 86vw);
    transform: translateX(-104%); transition: transform .22s ease; box-shadow: 8px 0 30px rgba(0,0,0,.25);
  }
  body.nav-open .sidebar { transform: none; }
  body.nav-open .sidebar-overlay { display: block; }
  .menu-btn { display: inline-flex; }
  .topbar { padding: 0 12px; gap: 8px; }
  .topbar .search-wrap { width: 320px; max-width: 46vw; }
  .content { padding: 18px 16px 50px; }
  .builder { grid-template-columns: 1fr; }
  .builder-pane { position: static; max-height: none; }
  .builder-tabs { display: flex; gap: 2px; border-bottom: 2px solid var(--border); margin-bottom: 12px; }
  .builder-tabs .tab { flex: 1; text-align: center; }
  .builder[data-pane="palette"] .b-canvas, .builder[data-pane="palette"] .b-props { display: none; }
  .builder[data-pane="canvas"] .b-palette, .builder[data-pane="canvas"] .b-props { display: none; }
  .builder[data-pane="props"] .b-palette, .builder[data-pane="props"] .b-canvas { display: none; }
  .builder-top { top: -18px; }
  .md-editor { grid-template-columns: 1fr; }
  .diff-body { grid-template-columns: 1fr; }
  .dash-widget { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .grid2, .grid3 { grid-template-columns: 1fr; }
  .page-head .actions { margin-left: 0; width: 100%; }
  .page-head h1 { font-size: 19px; }
  .stat-row { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
  .crit-row { grid-template-columns: 1fr 1fr; }
  .crit-row > :last-child { grid-column: 2; justify-self: end; }
  .theme-cards { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .kv { grid-template-columns: 1fr; gap: 0; }
  .kv dt { padding-bottom: 0; }
  .kv dd { padding-top: 2px; padding-bottom: 8px; }
  .tabs { margin: 12px 0; }
  .tab { padding: 8px 12px; }
  .stagebar { gap: 4px; }
  .stage-chip { padding: 4px 9px; font-size: 12px; }
  .help-panel { width: 100vw; max-width: 100vw; }
  .theme-cards { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .topbar .search-wrap { width: auto; max-width: none; flex: 1; }
  .user-chip > div:last-child { display: none; }
  .user-chip { padding: 4px; }
  .content { padding: 14px 12px 40px; }
  .card-pad { padding: 14px 14px; }
  .modal-overlay { padding: 0; align-items: stretch; }
  .modal { width: 100vw; max-width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; }
  .modal-wide { width: 100vw; }
  .modal-body { flex: 1; }
  .modal-foot .btn { flex: 1; justify-content: center; }
  input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=tel],
  input[type=datetime-local], input[type=search], input[type=url], select, textarea { font-size: 16px; }
  .btn { padding: 9px 13px; }
  .page-head .actions .btn, .page-head .actions input, .page-head .actions select { flex: 1 1 auto; }
  #toasts { left: 12px; right: 12px; bottom: 12px; }
  .toast { max-width: none; }
  .tour-pop { left: 4vw !important; width: 92vw; }
  .stat .n { font-size: 22px; }
  .login-card { padding: 26px 20px; }
  .env-badge { padding: 3px 6px; font-size: 9.5px; max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Larger hit targets for touch */
@media (pointer: coarse) {
  .nav-item { min-height: 40px; }
  .btn, .icon-btn { min-height: 40px; }
  .btn-sm { min-height: 36px; }
  .tab { min-height: 40px; display: inline-flex; align-items: center; }
  .rating-scale label { min-width: 44px; min-height: 44px; }
  .canvas-item .handle { padding: 0 10px; font-size: 18px; }
}

/* Print: content only */
@media print {
  .sidebar, .topbar, .help-panel, #toasts, .page-head .actions { display: none !important; }
  #app { height: auto; overflow: visible; }
  .content { overflow: visible; padding: 0; }
  .card { box-shadow: none; }
}

@media (max-width: 720px) {
  .grid3 { grid-template-columns: 1fr; }
  .tc-head { display: none; }
  .tc-row { grid-template-columns: 1fr 1fr; }
  .rule-row { grid-template-columns: 24px 1fr 28px; }
  .rule-row input:nth-child(3) { grid-column: 2; }
  .condition-editor .crit-row { grid-template-columns: 1fr; }
  .address-grid { grid-template-columns: 1fr; }
}