/* Responsive overrides — loaded LAST, desktop-first, all !important.
   Matches inline styles via attribute-substring selectors. CRITICAL: the
   style-hover runtime re-serializes style and inserts a space after every
   colon, so these selectors ONLY match colon-free fragments (`220px minmax`,
   `repeat(5,1fr)`, `120px 0`), never `columns:1fr`-style strings. */

/* structural show/hide defaults (overridden inside the media queries) */
[data-chapters] { display: none; }
[data-when='narrow'] { display: none; }

/* ---- <= 1024px : collapse the rail, single-column shell -------------------- */
@media (max-width: 1024px) {
  [style*='220px minmax'] { grid-template-columns: 1fr !important; gap: 0 !important; }
  [data-rail] { display: none !important; }
  [data-chapters] { display: block !important; }

  /* core-five 5 -> 2 up */
  [style*='repeat(5,1fr)'] { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ---- <= 767px : single column everywhere ---------------------------------- */
@media (max-width: 767px) {
  /* grids */
  [style*='repeat(5,1fr)'] { grid-template-columns: 1fr !important; }
  [style*='repeat(2,1fr)'] { grid-template-columns: 1fr !important; }
  [style*='repeat(3,1fr)'] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*='1fr 1fr'] { grid-template-columns: 1fr !important; }

  /* spread rhythm + fluid headline caps */
  [style*='120px 0'] { padding: 72px 0 !important; }
  [data-fluid-hero] { font-size: 38px !important; }
  [data-fluid-statement] { font-size: 30px !important; }

  /* header right side collapses to just the compact assets pill */
  [data-when='wide'] { display: none !important; }
  [data-when='narrow'] { display: inline-flex !important; }

  /* ramp strips keep 10 cells but scroll horizontally */
  [data-ramp-strip] { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  [data-ramp-strip] > * { min-width: 56px !important; flex: 0 0 auto !important; }

  /* semantic-token rows collapse to two lines (swatch+name+hex / alias+use) */
  [data-semantic-row] {
    grid-template-columns: 20px 1fr auto !important;
    grid-template-areas:
      'dot token hex'
      'dot alias use' !important;
    row-gap: 4px !important;
    align-items: start !important;
  }
}