/* Mobile: photos and tabs share ONE grid, 4 across over 2 rows, so all eight of
   each are on screen with no swiping. One shared pair of custom properties drives
   both rails, so they cannot drift apart.
   Column comes out ~72px at 360 and ~80px at 390; labels wrap to two lines and the
   tab keeps a 44px minimum, so "Partner Passes" still fits without truncation. */
#page-rhythm-dash{ --rst-col:140px; --rst-gap:10px; }

@media (max-width:640px){
  #rsStrip .rst-row,
  #huRhythmRoot .flex.min-w-max{
    display:grid !important;
    /* wider rules set repeat(8,minmax(0,1fr)) / flex — both must be cleared or the
       old tracks stay, collapse to 0 and the new ones are appended after them */
    grid-template-columns:repeat(4, minmax(0,1fr)) !important;
    grid-auto-flow:row !important;
    grid-auto-columns:auto !important;
    gap:8px !important;
    min-width:0 !important;
    overflow-x:visible !important;
  }
  /* hu-rhyd-tabs sets gap:10px !important on the tab row and sits later in the
     document, so the tab gap needs more specificity than the shared rule above —
     otherwise the two grids compute different column widths and drift apart */
  #page-rhythm-dash #huRhythmRoot .flex.min-w-max{ gap:8px !important; }
  #rsStrip .rst-i{ flex:none !important; width:auto !important; }
  #rsStrip .rst-i img{ border-radius:12px; }

  #huRhythmRoot .overflow-x-auto.border-b{ overflow-x:visible !important; }
  #huRhythmRoot button.relative.pb-4{
    width:100%;
    min-height:44px;
    padding:8px 4px 10px !important;
    font-size:.72rem !important;
    line-height:1.2 !important;
    text-align:center;
    white-space:normal;          /* let two-word labels wrap rather than clip */
    hyphens:none;
  }
  #huRhythmRoot button.relative.pb-4 > span.absolute{ left:8px !important; right:8px !important; }
}