@media (max-width: 1200px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .split { grid-template-columns: 1fr; }
  .stages { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .app, .app.collapsed { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: var(--sidebar-w); z-index: 200; transform: translateX(-100%); transition: transform .2s; }
  .app.mobile-open .sidebar { transform: none; box-shadow: var(--shadow-3); }
  .app.collapsed .nav-section, .app.collapsed .nav a span, .app.collapsed .brand-name, .app.collapsed .eng-chip { display: revert; }
  .topbar, .main { grid-column: 1; }
  .grid-2, .grid-3, .form-grid, .form-grid.cols-3, .form-grid.cols-4 { grid-template-columns: 1fr; }
  .form-header { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page { padding: 16px; }
  .user-pill .meta { display: none; }
  .stages { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kv { grid-template-columns: 1fr; }
  .bar-row { grid-template-columns: 100px 1fr 54px; }
}
@media (max-width: 560px) {
  .grid-4, .grid-6 { grid-template-columns: 1fr 1fr; }
  .topbar .search { display: none; }
  .dt-toolbar input[type=search] { width: 100%; }
}

/* Overflow containment: grid/flex children may shrink; wide tables scroll inside their card, not the page. */
.grid > *, .split > *, .form-grid > *, .page-head > *, .row > * { min-width: 0; }
.card-body, .card-body.flush, .modal-body { overflow-x: auto; }
.main { overflow-x: hidden; }
@media (max-width: 900px) {
  .page { max-width: 100vw; }
  .grid[style*="grid-template-columns"], .form-grid[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  .split { grid-template-columns: minmax(0, 1fr) !important; }
  .dt-toolbar select { max-width: 100%; }
  .action-bar .status-area { flex-basis: 100%; flex-wrap: wrap; }
  .kv { grid-template-columns: 1fr; }
  .tabs { max-width: 100%; }
  .page-actions { width: 100%; }
  .stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .heat, [data-testid=heatmap] { max-width: 100%; overflow-x: auto; }
  input, select, textarea { max-width: 100%; }
}