.responsive-table { width:100%; max-width:100%; min-width:0; overflow-x:auto; }
.responsive-table:focus-visible { outline:3px solid #84b4a0; outline-offset:3px; }
.responsive-table-hint { margin:8px 0 0; color:#5d6d65; font-size:14px; }

@media (max-width:1000px) {
  header { flex-wrap:wrap; row-gap:16px; }
  header nav { flex-basis:100%; min-width:0; flex-wrap:wrap; }
  header .account { max-width:100%; overflow-wrap:anywhere; }
}

@media (max-width:680px) {
  h1, h2, h3, .card, main p, main li { overflow-wrap:anywhere; }
  .card, .panel { min-width:0; }
  .actions, .form-actions { flex-wrap:wrap; }
  .page-heading { flex-wrap:wrap; }
  .page-heading > div { min-width:0; max-width:100%; }
  .input { min-width:0; max-width:100%; }
}

@media (max-width:570px) {
  .order-number-fields { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .order-number-fields > div { min-width:0; }
}

@media (max-width:360px) {
  .dashboard-recent-heading { flex-wrap:wrap; gap:12px; }
}