/* Mobile pass. Layout rules key off data-m-* attributes that mobile-nav.js stamps on
   elements by reading their INLINE styles — substring matching on the serialized
   style attribute is unreliable (React emits "display: flex", with a space).
   Breakpoints: 980px (tablet) and 640px (phone). */

@media (max-width: 980px) {
  /* page gutters */
  [style*="1240px"], [style*="1180px"], [style*="1100px"], [style*="1000px"], [style*="960px"] {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  /* card grids: fewer columns, tighter gap */
  [data-m-grid="cards"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }
  /* hairline grids draw their rules WITH the gap — never touch it */
  [data-m-grid="hairline"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  /* an odd card in a 2-up hairline grid would leave the container background
     showing as an empty cell — let it span the row instead */
  [data-m-grid="cards"] > :last-child:nth-child(odd),
  [data-m-grid="hairline"] > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  /* label/value and year/citation rows keep their fixed first column */
  [data-m-grid="sidebar"] {
    gap: 20px !important;
  }

  /* long horizontal rows wrap instead of overflowing */
  [data-m-flex="row"] { flex-wrap: wrap !important; }

  /* grid/flex children default to min-width:auto, so one long unbroken string
     (a journal name, a byline) widens its track and scrolls the whole page */
  [data-m-grid] > *, [data-m-flex="row"] > * { min-width: 0 !important; }
  body { overflow-wrap: break-word; }

  /* desktop nav off, hamburger on (button is injected at body level) */
  header nav { display: none !important; }
  #cu-mobile-toggle { display: flex !important; }

  h1 { font-size: 46px !important; line-height: 1.05 !important; }
  h2 { font-size: 31px !important; }
  h3 { font-size: 20px !important; }

  img { max-width: 100% !important; }
  table { display: block !important; overflow-x: auto !important; }
}

@media (max-width: 640px) {
  [style*="1240px"], [style*="1180px"], [style*="1100px"], [style*="1000px"], [style*="960px"] {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  [data-m-grid="cards"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }
  [data-m-grid="hairline"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  [data-m-grid="sidebar"] {
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 14px !important;
  }
  /* wide fixed first columns (e.g. a 200px label rail) stack instead */
  [data-m-grid="sidebar"][data-m-wide] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* vertical rhythm tightens so pages don't feel like endless scrolling */
  [style*="--cu-rhythm"] { --cu-rhythm: 0.62 !important; }

  h1 { font-size: 34px !important; letter-spacing: -0.015em !important; }
  h2 { font-size: 25px !important; }
  h3 { font-size: 19px !important; }
  p { font-size: 17px !important; line-height: 1.55 !important; }

  /* generous tap targets — mobile-nav.js stamps links/buttons that render under
     40px tall and are not inside running prose. The hit area is an invisible
     overlay, so nothing in the layout moves. */
  a[style*="padding"], button { min-height: 44px !important; }
  [data-m-tap] { position: relative; }
  [data-m-tap]::after {
    content: "";
    position: absolute;
    left: -6px; right: -6px; top: 50%;
    height: 44px;
    transform: translateY(-50%);
  }
}