/* Tablet and desktop enhancements (base styles are mobile first). */
@media (min-width: 480px) {
  .stats { grid-template-columns: repeat(4, 1fr); }
  .summary__grid { grid-template-columns: repeat(4, 1fr); }
  .grid2 { grid-template-columns: 1fr 1fr; }
  .legend { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 640px) {
  .main { padding: 24px 24px 40px; gap: 24px; }
  .cats { grid-template-columns: 1fr 1fr; }
  .cats li:first-child { grid-column: 1 / -1; }
  .filters { grid-template-columns: repeat(5, 1fr); }
  .options { grid-template-columns: 1fr 1fr; }
  .options--sentences { grid-template-columns: 1fr; }
  .auth__card { padding: 32px 28px; }
  .toasts { bottom: 96px; }
}

@media (min-width: 900px) {
  body.has-tabbar { padding-bottom: 0; }
  /* The tab bar becomes a top navigation next to the brand. */
  .tabbar {
    position: fixed; top: 0; bottom: auto; left: 50%; right: auto; transform: translateX(-50%); z-index: 21;
    display: flex; gap: 4px; height: 65px; align-items: center;
    background: transparent; border: 0; box-shadow: none; padding: 0;
  }
  .tabbar__link { flex-direction: row; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 999px; font-size: 0.9rem;  }
  .tabbar__link:hover { background: var(--surface-2); color: var(--text); }
  .tabbar__link.is-active { background: var(--accent-soft); }
  .main { max-width: 880px; }
  .main--focus { max-width: 720px; }
  .toasts { bottom: 24px; }
}