/* Cross-cutting responsive adjustments not already handled inline
   in the component files above. Kept intentionally small — most
   responsive rules live next to the component they affect. */

@media (max-width: 480px) {
  .container, .container--narrow {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
  table { font-size: var(--text-sm); }
}

/* Prevent any horizontal overflow from wide tables on small screens */
.table-responsive {
  width: 100%;
  overflow-x: auto;
}