/* Sports Club OS: phone and tablet fixes for claude-version.html, loaded last.
   Readable text (12px or more for words people read), 44px tap targets, and nothing wider than the screen.
   Illustrations (the mock TVs and phones, the demo frames, the hero's wall of screens) keep their own sizes. */

/* The open menu: style.css hangs it 13px past .nav-wrap, whose margin on a phone is 12px, so it was 1px
   wider than the screen while open. */
@media (max-width: 650px) {
  #navigation { left: -12px; right: -12px; }
}

/* Menu and its dropdowns: labels big enough to read and press. */
@media (max-width: 1100px) {
  .menu-toggle { min-height: 44px; font-size: 13px; }
  .mega-label, .mega-groups-heading .mega-label { font-size: 11px; }
  .mega-group small, .mega-icon-link small, .mega-link > span, .mega-overview { font-size: 12px; }
  .mega-icon-link strong { font-size: 13px; }
  .mega-group em { font-size: 10px; }
}

@media (max-width: 650px) {
  .menu-toggle { padding: 8px 12px; gap: 8px; }
  a.brand:not(.footer-brand) { min-height: 44px; }

  /* Labels in capitals: 11px reads like 12px in lower case; under that they were 8 to 10px. */
  .eyebrow, .tag, .hero-bottom > span, .footer-top > div > span { font-size: 11px; }
  .demo-heading .tag, .draw-board > .tag { font-size: 10px; }

  /* Words people read. */
  .hero-note, .hero .hero-note, .hero-bottom > div, .caption, .feature-panel .caption,
  .pricing-note, .form-note, .footer-bottom { font-size: 12px; }
  .actions .text-link { font-size: 13px; }
  .sports-line small { font-size: 11px; }
  .day-controls button { font-size: 12px; }
  .motion-tabs > button { font-size: 12px; }

  /* Tap targets. */
  .text-link, .motion-toggle, .demo-action { min-height: 44px; }
  .footer-top > div > a:not(.brand) { display: flex; align-items: center; min-height: 44px; margin-bottom: 0; }
  .footer-bottom > a { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; }
}

/* The demo player's own phone and touch rules are in claude-demo/player.css (16 Oct 2026). */

/* The footer's BY SPORT column (pages-src/build.mjs writes it from the live sport pages) makes four columns: the brand
   keeps its wider share on a wide screen, takes a row of its own above the three lists under 1100px, and on a phone
   the lists go two to a row as style.css has them. */
.footer-top:has(> .footer-sports) { grid-template-columns: 2fr 1fr 1fr 1fr; }
@media (max-width: 1100px) {
  .footer-top:has(> .footer-sports) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-top:has(> .footer-sports) > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 650px) {
  .footer-top:has(> .footer-sports) { grid-template-columns: 1fr 1fr; }
}