/* FAI visualisers, phone layout fix.

   The ten viz-*.html pages load no stylesheet at all; app.css is the study
   app's chrome and does not belong on them, so this is their own sheet.
   Everything below is additive and lives inside @media (max-width:560px):
   tablet and desktop rendering is byte-for-byte unchanged. It is listed in
   sw.js PRECACHE, so it is available offline like the rest of the shell.

   Defect it closes, measured at 390x844 with a mobile viewport. Nine of the
   ten pages pushed the document sideways, documentElement.scrollWidth:
     viz-planning 560  viz-mdp 485  viz-sat 476  viz-games 474
     viz-uncertainty 469  viz-versionspaces 465  viz-csp 454
     viz-patternmining 442  viz-informed 430          (viz-uninformed 390, fine)
   When the document overflows, the browser widens the layout viewport to
   swallow it, so the page renders zoomed out and every control shrinks with
   it. In every case the culprit was the same: .bar is display:flex with
   flex-wrap:wrap, but the groups inside it (.grp, label, select) are
   inline-flex or nowrap, so they can neither wrap nor shrink.

   Technique: let the inner groups wrap too, and stop the wide selects from
   claiming a fixed em width. Nothing is resized on a wider screen, no
   control is hidden, and no canvas or SVG is touched. */
@media (max-width:560px){
  /* the control bar's inner groups may wrap onto their own lines */
  .bar .grp,.bar > .grp,.bar label,.bar > label{flex-wrap:wrap}
  .bar label,.bar .grp > label{white-space:normal}

  /* min-width:auto is what stopped every one of these shrinking: a flex item
     refuses to go below its content's min-content width, and a <select>'s
     min-content width is its longest option, which cannot wrap. */
  .bar .grp,.bar label,.bar select,.bar input[type=range]{min-width:0}

  /* selects carried max-width:19rem..26rem, wider than the phone */
  .bar select,.bar input[type=range]{max-width:100%}
  .bar label{max-width:100%}
  select#prob{max-width:100%}

  /* viz-informed: the two result panels sit in a one-column grid whose
     column still refused to go under its content's min-content width */
  .grid{grid-template-columns:minmax(0,1fr)}
  .grid > div{min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* viz-games / viz-csp / viz-planning: wide tables scroll inside a wrapper
     instead of pushing the document sideways */
  .notes table,.hist table{display:block;width:100%;overflow-x:auto;
    -webkit-overflow-scrolling:touch}
}