/* Explainer diagrams inside the dark spec panel (.blt) span the whole panel
   rather than squeezing into its narrow second column. */
.blt > figure.bfig { grid-column: 1 / -1; margin: 10px 0 0; }
.blt > figure.bfig figcaption { color: #b9ccd3; }

/* Misonics — mobile overflow safety net.
   Grid and flex items default to min-width:auto, so they refuse to shrink below
   their content and push the whole page sideways on a phone. These rules load
   after every page's own styles, so they win on order without !important. */

@media (max-width: 820px) {

  /* nothing may be wider than the screen */
  img, svg, video, canvas, iframe, table { max-width: 100%; }

  /* let grid and flex children actually shrink */
  .gal > *, .factbox > *, .stack, .stack > *, .snap > *, .cont3 > *,
  .hw > *, .art > *, .maingrid > *, .bagrid > *, .bapairgrid > *,
  .next3 > *, .slgrid > *, .res > *, .pcard, .pflow { min-width: 0; }

  /* single-column stacks on a phone */
  .stack { grid-template-columns: 1fr; }

  /* image panels: fit the column, not the file */
  .gal .main { min-width: 0; min-height: 0; }
  .gal .main img, .gal img { max-width: 100%; height: auto; }

  /* thumbnail strips wrap rather than run off the edge */
  .thumbs { flex-wrap: wrap; }

  /* .fn2 is normally a big figure that must not break, but it also carries
     short phrases — let those wrap rather than run off the screen */
  .factbox .fn2 { white-space: normal; }
  .trial, .trial > * { min-width: 0; }

  /* long unbroken strings (part numbers, URLs) break instead of overflowing */
  .factbox, .art p, .bacap, .pcard td { overflow-wrap: anywhere; }

  /* wide content scrolls inside its own box */
  .pflow, .pcard { overflow-x: auto; }

  /* the dark spec panel goes single-column on a phone. Several product pages
     set grid-template-columns inline, so this one needs !important to win. */
  .blt { grid-template-columns: 1fr !important; }
  .blt > * { min-width: 0; }
  .blt img { width: 100%; height: auto; }

}

/* Wide explainer diagrams stay at a readable scale on a phone and are swiped
   sideways inside their own box, rather than shrunk until the labels vanish. */
.dgp { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 760px) {
  .dgp > svg { min-width: 860px; }
  .dgp + figcaption::before { content: "Swipe the diagram sideways to read it \2014 "; font-weight: 800; }
}