/* Responsive retrofit for the Claude Design export.
 *
 * The export ships correct <meta name="viewport"> but ZERO @media queries, and
 * styles every element with an inline style attribute (there is not a single
 * class in any page). So nothing reflows below desktop width: multi-column
 * grids stay multi-column, 58px display type stays 58px, and 32px section
 * padding eats 17% of a 375px viewport.
 *
 * Two consequences for how this file is written:
 *   1. Selectors match on the style attribute by substring, since there are no
 *      classes or ids to hook.
 *   2. Every override needs !important, because a stylesheet declaration
 *      otherwise loses to an inline one regardless of specificity.
 *
 * Rule order matters: the blunt "collapse every grid" rule comes first, and the
 * data-table rules that re-assert real columns come after it at equal
 * specificity, so they win.
 */

/* Belt and braces: a stray wide child must never make the whole page pan. */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 768px) {
  /* --- 1. Layout grids collapse to a single column ------------------------ */
  /* Covers repeat(4,1fr) and repeat(3,1fr) capability grids on Home, the
     160px 1fr 220px note list on Research (whose two fixed tracks alone
     exceed a 375px viewport), and the two-column Contact split. */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* --- 2. Section gutters ------------------------------------------------- */
  [style*="max-width: 1080px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* One header is width: calc(100% - 64px) with box-sizing: content-box,
     which assumes the 32px gutters it no longer has. */
  [style*="width: calc(100% - 64px)"] {
    width: auto !important;
    box-sizing: border-box !important;
  }

  /* --- 3. Header and nav ------------------------------------------------- */
  [style*="justify-content: space-between"][style*="max-width: 1080px"] {
    flex-wrap: wrap !important;
    gap: 12px !important;
  }

  /* Nav link row: 32px gaps push the last item off-screen. */
  [style*="display: flex"][style*="gap: 32px"] {
    gap: 18px !important;
    flex-wrap: wrap !important;
  }

  /* Metadata rows that sit side by side under headings. */
  [style*="justify-content: space-between"][style*="gap: 24px"] {
    flex-wrap: wrap !important;
    gap: 12px !important;
  }

  /* --- 4. Display type --------------------------------------------------- */
  /* Scaled down proportionally, keeping the typographic hierarchy intact. */
  [style*="font-size: 58px"] { font-size: 34px !important; }
  [style*="font-size: 44px"] { font-size: 30px !important; }
  [style*="font-size: 42px"] { font-size: 28px !important; }
  [style*="font-size: 40px"] { font-size: 28px !important; }
  [style*="font-size: 26px"] { font-size: 22px !important; }
  [style*="font-size: 25px"] { font-size: 21px !important; }

  /* --- 5. Data tables scroll rather than collapse ------------------------- */
  /* Rule 1 would stack these into unlabelled columns of numbers. A results
     table only means anything with its columns intact, so the wrapper scrolls
     horizontally instead and the rows keep their real templates.
     The wrapper selector appears exactly once per alt-data page and nowhere
     else in the site.
     Both colour notations are listed because browsers re-serialise the style
     attribute and match selectors against that normalised form: Chrome reports
     this element's style as `border-top: 1px solid rgb(27, 36, 64)`, so the
     hex form alone silently matches nothing. */
  [style*="border-top: 1px solid #1B2440"],
  [style*="border-top: 1px solid rgb(27, 36, 64)"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  [style*="grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr"] {
    grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr !important;
    min-width: 540px !important;
    gap: 8px !important;
  }

  [style*="grid-template-columns: 1.2fr 1.6fr 1fr 1fr"] {
    grid-template-columns: 1.2fr 1.6fr 1fr 1fr !important;
    min-width: 500px !important;
    gap: 8px !important;
  }

  [style*="grid-template-columns: 2fr 1.2fr 1fr 0.8fr"] {
    grid-template-columns: 2fr 1.2fr 1fr 0.8fr !important;
    min-width: 500px !important;
    gap: 8px !important;
  }
}