/* Keep filters available in a narrow, animated icon rail. */
@media (min-width: 701px) {
  .match-board { display: grid; transition: grid-template-columns 320ms cubic-bezier(.22,1,.36,1); }
  .match-board.is-rail-collapsed { grid-template-columns: 52px minmax(0,1fr); }
  .match-rail { display: flex; min-width: 0; box-sizing: border-box; transition: width 320ms cubic-bezier(.22,1,.36,1), padding 320ms cubic-bezier(.22,1,.36,1); }
  .match-rail .match-rail-label { max-width: 220px; opacity: 1; transition: max-width 320ms cubic-bezier(.22,1,.36,1), opacity 160ms ease; }
  .match-rail .match-rail-section button, .match-rail .match-mine-link { transition: padding 320ms cubic-bezier(.22,1,.36,1), gap 320ms cubic-bezier(.22,1,.36,1), background-color 180ms ease, color 180ms ease, box-shadow 180ms ease; }
  .match-rail .match-category-chevron { transition: opacity 160ms ease, width 320ms cubic-bezier(.22,1,.36,1), flex-basis 320ms cubic-bezier(.22,1,.36,1), transform 240ms ease; }
  .match-rail-title { transition: padding 320ms cubic-bezier(.22,1,.36,1); }
  .is-rail-collapsed .match-rail { padding-left: 4px; padding-right: 4px; }
  .is-rail-collapsed .match-rail-brand { opacity: 0; visibility: hidden; transform: translateX(-8px); pointer-events: none; }
  .is-rail-collapsed .match-rail .match-rail-label { max-width: 0; opacity: 0; }
  .is-rail-collapsed .match-rail .match-rail-section button, .is-rail-collapsed .match-rail .match-mine-link { padding-left: 12px; padding-right: 12px; gap: 0; }
  .is-rail-collapsed .match-rail .match-category-chevron { width: 0; flex-basis: 0; opacity: 0; }
  .is-rail-collapsed .match-rail-title { padding-left: 4px; padding-right: 4px; }
  .is-rail-collapsed .match-rail-section > span { padding-left: 0; padding-right: 0; text-align: center; white-space: nowrap; }
}
@media (min-width: 701px) and (max-width: 1250px), (min-width: 1251px) and (max-aspect-ratio: 5/4) {
  .match-board, .match-board.is-rail-collapsed { grid-template-columns: 52px minmax(0,1fr); }
  .match-rail { grid-column: 1; grid-row: 1; position: relative; z-index: 5; width: 212px; box-shadow: 5px 8px 20px rgba(38,68,78,.12); }
  .is-rail-collapsed .match-rail { width: 52px; box-shadow: 0 12px 28px rgba(38,68,78,.05); }
  .match-main { grid-column: 2; grid-row: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .match-board, .match-rail, .match-rail-title, .match-rail .match-rail-label, .match-rail .match-rail-section button, .match-rail .match-mine-link, .match-rail .match-category-chevron { transition: none; }
}