/* Medico — mobile layout safety net. Keeps every page inside the viewport on small screens. */
@media (max-width: 760px) {
  /* let grid/flex children shrink instead of forcing the page wider */
  article,
  article section,
  article section > div,
  main section,
  main section > div,
  aside,
  footer > div {
    min-width: 0 !important;
  }

  /* rows of chips / stats / buttons must wrap */
  article div[style*="display: flex"],
  main div[style*="display: flex"],
  section div[style*="display: flex"] {
    flex-wrap: wrap !important;
  }

  /* long labels break instead of pushing the layout */
  [style*="white-space: nowrap"] {
    white-space: normal !important;
  }

  /* wide tables scroll inside their own box */
  article table,
  main table {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0 !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* horizontal card carousels keep their own scroll, never the page */
  div[style*="overflow-x: auto"],
  div[style*="overflow-x:auto"] {
    max-width: 100%;
  }

  /* final safety net: clip (not hidden) so sticky positioning keeps working */
  html,
  body {
    overflow-x: clip;
    max-width: 100%;
  }
}