/* PPLI.com for advisors — mobile corrections for the two public pages.
 *
 * Three real problems, found by rendering the pages at 360 and 390px rather
 * than by reading the CSS.
 *
 * 1. On /advisors/professional/ the registration grid was 334px wide inside a
 *    319px column, so the page was clipped. The cause was one image: grid items
 *    default to min-width:auto, so an image with a larger intrinsic width forces
 *    its track wider than the container and every other child inherits the wrong
 *    width. The fix is the image, not the grid, but both are constrained here so
 *    it cannot come back.
 *
 * 2. The simulator toolbar buttons were 33px tall — under every published
 *    minimum for a touch target, on the four controls an adviser is most likely
 *    to press on a phone.
 *
 * 3. In the workspace section the drawn interface panel carries a four-column
 *    table. Below about 400px its min-content width exceeded the panel and the
 *    right-hand column was being cut off. The type and padding come down at that
 *    size, and there is a scroll fallback underneath so it can be tight but
 *    never truncated.
 */

/* Images must never widen their container. Not mobile-specific — this was
   simply never true and only showed up when the column got narrow. */
.pp .regimg,
.pp .reg img,
.pp.adv img { max-width: 100%; height: auto; }

@media (max-width: 820px) {

  /* Grid items shrink below their content rather than pushing the track out. */
  .pp .reg { grid-template-columns: minmax(0, 1fr); }
  .pp .reg > * { min-width: 0; }
  .pp .regcard { min-width: 0; }

  /* Touch targets. 44px is the number Apple publishes and Google's is 48dp;
     44 with the existing type size is the honest compromise. */
  .pp.adv .advx-simbtn,
  .pp.adv .advx-simbar button {
    min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .pp.adv .btn,
  .pp.adv .btn-gd,
  .pp.adv .btn-w,
  .pp.adv .btn-g,
  .pp.adv .btn-o { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

  /* The briefing form: full-width fields and no iOS zoom on focus. */
  .pp.adv .advx-form input[type="email"],
  .pp.adv .advx-form input[type="text"] { font-size: 16px; }
  .pp.adv .advx-form button { min-height: 46px; }

  /* The consent checkbox needs a target big enough to hit deliberately. */
  .pp.adv .advx-consent input { width: 20px; height: 20px; flex: 0 0 20px; }
}

/* Small handsets. The drawn interface has to stay readable and stay whole. */
@media (max-width: 430px) {
  .pp.adv .advx-ui-m { padding: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .pp.adv .advx-tbl th,
  .pp.adv .advx-tbl td { padding: 7px 6px; font-size: 10px; }
  .pp.adv .advx-tbl th { white-space: normal; }
  .pp.adv .advx-tbl .nm { font-size: 10.5px; }
  .pp.adv .advx-tbl .sb { font-size: 8.5px; }
  .pp.adv .advx-tg { font-size: 6.5px; padding: 1px 4px; letter-spacing: .08em; }
  .pp.adv .advx-ui-tiles > div { padding: 9px 10px; }
  .pp.adv .advx-ui-tiles b { font-size: 18px; }
  .pp.adv .advx-ui-bar { padding: 8px 10px; }
  .pp.adv .advx-ui-bar em { font-size: 7.5px; }
}