/* pure-responsive.css — PURE · the responsive floor every shell page is held to.
 * Lane Code, 2026-08-12. Mike: "sweep all pages within the admin apps shell and the pure app
 * shell and ensure they are held to the same standard now" — the standard being the one set on
 * the signing surface: content sizes to the device it is opened on, and nothing forces the page
 * sideways.
 *
 * This file only ever RELAXES fixed sizing. It adds no colours, no spacing and no opinions, so
 * dropping it into a page cannot restyle that page — it can only stop it from overflowing.
 *
 * 1. TABLES THAT CANNOT SCROLL. The single most common break: a wide table with no scroll
 *    container drags the whole page sideways on a phone, and the reader ends up panning the
 *    header and the nav to read a cell. The fix that needs no markup change is to let the table
 *    itself become the scroller. Applied only below 900px, so desktop table layout is untouched.
 *
 * 2. FIXED PIXEL WIDTHS. 24 pages carry a hard width (520px is the common one) that cannot
 *    shrink below the phone viewport. Capping to 100% is safe because a fixed width wider than
 *    its container is already a bug, and nothing legitimately needs to be wider than the screen.
 *
 * 3. MEDIA THAT DOES NOT SHRINK. img/svg/video/iframe/canvas default to their intrinsic width,
 *    which is how a single screenshot pushes a whole page off-screen.
 *
 * Deliberately NOT here: heights. A fixed height is sometimes correct (a map, a chart) and
 * sometimes wrong (the 430px document window on the signing page). That call is per-page and
 * a blanket override would break the legitimate ones.
 */

@media (max-width: 900px) {
  /* 1 — the table becomes its own horizontal scroller rather than widening the page */
  table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* keep the row model intact inside the now-block table so columns still line up */
  table > thead, table > tbody, table > tfoot { display: table; width: 100%; table-layout: auto; }
  table > thead > tr, table > tbody > tr, table > tfoot > tr { display: table-row; }
}

@media (max-width: 640px) {
  /* 2 — nothing may be wider than the screen it is opened on */
  [style*="width:520px"], [style*="width: 520px"],
  [style*="width:480px"], [style*="width: 480px"],
  [style*="width:430px"], [style*="width: 430px"],
  [style*="width:420px"], [style*="width: 420px"],
  [style*="width:390px"], [style*="width: 390px"],
  [style*="width:380px"], [style*="width: 380px"],
  [style*="width:360px"], [style*="width: 360px"] { max-width: 100% !important; }
}

/* 3 — media shrinks with its container, everywhere, not just on phones */
img, svg, video, canvas { max-width: 100%; height: auto; }
iframe { max-width: 100%; }