/* Gate Series mobile overrides — the pages are inline-styled prototypes, so these
   rules override by attribute selector + !important. Desktop is untouched. */
@media (max-width: 700px) {
  html, body { overflow-x: hidden; }

  /* The sticky header eats half a phone screen once the nav wraps — let it scroll away. */
  [style*="position:sticky"], [style*="position: sticky"] { position: static !important; }

  /* Tighten the chrome */
  [style*="padding:18px 32px"] { padding: 14px 18px !important; }
  [style*="padding:22px 32px"] { padding: 16px 18px !important; }

  /* Label/content rows (170px|180px label columns) stack on narrow screens,
     including the compose modal's name row. Avatar rows (28px/34px) stay grids. */
  [style*="grid-template-columns:100px"], [style*="grid-template-columns: 100px"],
  [style*="grid-template-columns:110px"], [style*="grid-template-columns: 110px"],
  [style*="grid-template-columns:120px"], [style*="grid-template-columns: 120px"],
  [style*="grid-template-columns:130px"], [style*="grid-template-columns: 130px"],
  [style*="grid-template-columns:150px"], [style*="grid-template-columns: 150px"],
  [style*="grid-template-columns:170px"], [style*="grid-template-columns: 170px"],
  [style*="grid-template-columns:180px"], [style*="grid-template-columns: 180px"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:56px"],  [style*="grid-template-columns: 56px"]  { grid-template-columns: 56px 1fr !important; }

  /* Two-column heroes (text + phone etch), flow diagrams, and any minmax()-based grid
     stack to one column. Browsers reserialise inline styles (0 -> 0px, added spaces),
     so match on the minmax token rather than exact value strings. auto-fit grids that
     also match are single-column at this width anyway. */
  [style*="grid-template-columns"][style*="minmax("] { grid-template-columns: 1fr !important; }

  /* Compose modal: full-width bottom sheet, keyboard-friendly */
  [style*="align-items:flex-end"][style*="position:fixed"] { padding: 10px !important; }

  /* Section comment strip: let the pill wrap instead of forcing one line.
     Both serialisation forms (with and without the space after the colon). */
  [style*="white-space:nowrap"], [style*="white-space: nowrap"] { white-space: normal !important; max-width: 100%; }

  /* The CLOCK timeline table pins itself to 880px; release it and let its
     (already stacked) internal grid flow at phone width. */
  [style*="min-width:880px"], [style*="min-width: 880px"] { min-width: 0 !important; }
}
