/* Stats page, mobile: stack everything into single columns so nothing overflows sideways. */
@media (max-width: 760px) {
  /* the flat cards (mobile-flat.css) use a 100vw trick that overshoots inside a scrollbar/frame; keep them at 100% of the page instead */
  .desktop-site main .subpage-content.shell { width: 100%; }
  .desktop-site main .subpage-content .stats-range-bar,
  .desktop-site main .subpage-content .occurrence-card,
  .desktop-site main .subpage-content .pattern-card { width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; }
  .desktop-site .metric-grid { padding: 0 12px; }
  .desktop-site .pattern-section-head { padding: 0 20px; }

  /* range bar: buttons first, the slider right below them */
  .desktop-site .filter-bar.stats-range-bar { flex-direction: column; align-items: stretch; min-height: 0; padding: 22px 20px; gap: 0; overflow: hidden; }
  .desktop-site .stats-range-bar > .stats-range-controls { display: flex; flex-direction: column; align-items: stretch; width: 100%; gap: 18px; }
  .desktop-site .stats-range-bar .range-preset-row,
  .desktop-site .stats-range-bar .manual-range-row { width: 100%; }
  .desktop-site .stats-range-bar .range-preset-row { flex-wrap: wrap; gap: 8px; }
  .desktop-site .stats-range-bar .range-preset-row > span { flex: 0 0 100%; margin: 0 0 2px; }
  .desktop-site .filter-bar.stats-range-bar button { padding: 10px 14px; font-size: 14px; }
  .desktop-site .stats-range-bar .range-count,
  .desktop-site .stats-range-bar .data-basis { display: none; }
  .desktop-site .stats-range-bar .manual-range-row { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; }
  .desktop-site .stats-range-bar .manual-range-row .dual-range { grid-column: 1 / -1; grid-row: 2; min-width: 0; }
  .desktop-site .stats-range-bar .manual-range-row > span,
  .desktop-site .stats-range-bar .manual-range-row output { font-size: 14px; }

  /* top metrics: 2 x 2 */
  .desktop-site .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .desktop-site .metric-grid article { min-height: 0; padding: 20px 18px; gap: 14px; }
  .desktop-site .metric-grid article > span { font-size: 14px; }
  .desktop-site .metric-grid article > strong { font-size: 30px; white-space: nowrap; }
  .desktop-site .metric-grid article > p { font-size: 13px; line-height: 1.5; word-break: keep-all; }

  /* number occurrence */
  .desktop-site .occurrence-card { padding: 26px 20px 24px; }
  .desktop-site .occurrence-head { flex-direction: column; align-items: stretch; gap: 16px; }
  .desktop-site .occurrence-view-controls { flex-wrap: wrap; }
  .desktop-site .occurrence-tabs button,
  .desktop-site .occurrence-gap-tab { min-height: 40px; padding: 8px 14px; font-size: 14px; }
  .desktop-site .occurrence-heatmap { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 20px; }
  .desktop-site .occurrence-cell { min-height: 68px; border-radius: 10px; }
  .desktop-site .occurrence-cell strong { font-size: 20px; }
  .desktop-site .occurrence-cell span { font-size: 12px; }
  .desktop-site .occurrence-legend { font-size: 13px; }

  /* combination index */
  .desktop-site .pattern-section-head { flex-direction: column; gap: 10px; }
  .desktop-site .pattern-section-head > p { margin: 0; font-size: 14px; }
  .desktop-site .pattern-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .desktop-site .pattern-card { min-height: 0; padding: 24px 20px 22px; }
  .desktop-site .pattern-main { font-size: 36px; }
  .desktop-site .pattern-card { min-width: 0; overflow: hidden; }
  .desktop-site .pattern-rows > div { grid-template-columns: minmax(64px, 27%) minmax(0, 1fr) 3.6em; gap: 10px; min-width: 0; }
  .desktop-site .pattern-rows i { min-width: 0; }
  .desktop-site .pattern-rows span,
  .desktop-site .pattern-rows strong { font-size: 13px; }
  .desktop-site .companion-pairs { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .desktop-site .companion-pairs > div { min-height: 60px; padding: 0 16px; }
  .desktop-site .companion-pairs > div > strong { font-size: 14px; }
}