/* Phone-first safety net.
   -------------------------------------------------------------------------
   A phone reported the landing hero rendering as a narrow column on the left
   with an empty canvas to the right. The cause was a grid whose minimum
   content width was wider than any phone, which makes mobile Chrome shrink
   the entire page to fit — every element correct, the whole page miniature.
   The hero grid is fixed at source in plotvision-hero.css; this file is the
   guard rail that stops any single element from ever doing it again.

   Loaded last, so it wins over the built utility sheet. */

html,
body {
  max-width: 100%;
  /* Not a cure for overflow — a containment of it. The layout fixes are real;
     this only stops one stray element from shrinking the whole document. */
  overflow-x: hidden;
  /* iOS zooms fixed-size text on rotation without this. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Media never exceeds its box, and never distorts doing it. */
img,
svg,
video,
canvas,
iframe {
  max-width: 100%;
}

img,
video {
  height: auto;
}

/* Deliberately no `img[width][height]` rule here: an attribute selector
   outranks the brand's own `.pv-lockup-mark` height and blew the header logo
   up to three times its size. Element-level `height: auto` above is enough
   and loses to every class rule, which is the point. */

/* Grid and flex children default to min-width:auto, which is what lets a long
   word or a wide image push a track past the viewport. */
.pv-daynight-grid > *,
main [class*="grid"] > *,
main [class*="flex"] > * {
  min-width: 0;
}

/* Long unbroken strings — URLs in legal copy, style keys, emails — wrap
   instead of widening the page. */
body {
  overflow-wrap: break-word;
}

@media (max-width: 767px) {
  /* Anything that asks for a fixed width in the desktop composition gets
     talked down to the screen. */
  main [style*="min-width"],
  main [class*="max-w-"] {
    max-width: 100% !important;
  }

  /* Touch targets. 44px is the floor, and a button that wraps its label is
     better than one that clips it. */
  button,
  a[role="button"],
  main a[class*="rounded"][class*="px-"] {
    min-height: 44px;
    white-space: normal;
  }
}