/* modern.css — responsive layer for the FrontPage-era entrelecsales.com (Dan 2026-10-25 modernization).
   Loaded last on every page. Layout only: page text, URLs, titles, meta, headings, links and structured data are untouched. */
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img { max-width: 100%; height: auto; }

/* desktop: centre the 750px page instead of hugging the left edge */
body > table, body > div > table, body > center > table { margin-left: auto; margin-right: auto; }

@media (max-width: 900px) {
  body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
  /* page-layout tables (FrontPage fixed widths 574–784px): stack their columns into one */
  table:is([width="750"], [width="725"], [width="784"], [width="700"], [width="635"], [width="608"], [width="591"], [width="574"], [WIDTH="574"]) {
    display: block; width: auto !important; max-width: 100%; height: auto !important;
  }
  table:is([width="750"], [width="725"], [width="784"], [width="700"], [width="635"], [width="608"], [width="591"], [width="574"], [WIDTH="574"]) > tbody,
  table:is([width="750"], [width="725"], [width="784"], [width="700"], [width="635"], [width="608"], [width="591"], [width="574"], [WIDTH="574"]) > tbody > tr,
  table:is([width="750"], [width="725"], [width="784"], [width="700"], [width="635"], [width="608"], [width="591"], [width="574"], [WIDTH="574"]) > tbody > tr > td {
    display: block; width: auto !important; height: auto !important;
  }
  td[width], th[width] { width: auto !important; }
  /* every other table (part indexes, spec and file lists): keep it a table, let it scroll in its own box */
  table:not([width="750"]):not([width="725"]):not([width="784"]):not([width="700"]):not([width="635"]):not([width="608"]):not([width="591"]):not([width="574"]):not([WIDTH="574"]) {
    max-width: 100%; width: auto !important;
  }
  table:not([width="750"]):not([width="725"]):not([width="784"]):not([width="700"]):not([width="635"]):not([width="608"]):not([width="591"]):not([width="574"]):not([WIDTH="574"]) {
    display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  div { max-width: 100%; }
  div[style*="width"] { width: auto !important; }
  div[style*="height"] { height: auto !important; }
  p, li, td { overflow-wrap: break-word; }
  img[width] { height: auto; }
  /* FrontPage fixed heights (height="283" etc.) overflow once columns stack */
  table[height], tr[height], td[height] { height: auto !important; }
  /* inner layout tables split by percentages (e.g. 57% | 43%): stack them too */
  table:has(> tbody > tr > td[width$="%"]:not([width="100%"])) { display: block; overflow: visible; }
  table:has(> tbody > tr > td[width$="%"]:not([width="100%"])) > tbody,
  table:has(> tbody > tr > td[width$="%"]:not([width="100%"])) > tbody > tr,
  table:has(> tbody > tr > td[width$="%"]:not([width="100%"])) > tbody > tr > td { display: block; width: auto !important; }
}