/* LiveSports360 — mobile bottom tab bar + "More" sheet.
   Loaded by templates/components/tabbar.php in BOTH shells, so it must stand
   on its own: every token has a fallback (the legacy pages do not load
   tokens.css and are light). From 820px the bar hides itself and the header
   nav takes over again. */

.tabbar, .tabbar-sheet { display: none; }

@media (max-width: 819px) {
  body { padding-bottom: calc(54px + env(safe-area-inset-bottom, 0px)); }
  /* The bar replaces the top navigation, in both shells. */
  .site-header .site-nav,
  .navbar { display: none; }
  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    display: flex; align-items: stretch;
    background: color-mix(in srgb, var(--surface, #ffffff) 94%, transparent);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--border, #e3e8ee);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .tabbar-sheet { position: fixed; inset: 0; z-index: 40; display: none; }
  .tabbar-sheet.is-open { display: block; }
}

.tabbar__item {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 5px 2px 6px; min-height: 52px;
  color: var(--text-muted, #6b7785); font-size: .6rem; font-weight: 600; letter-spacing: .02em;
  background: none; border: 0; font-family: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.tabbar__item svg { width: 22px; height: 22px; }
.tabbar__item:hover { color: var(--text, #17222e); text-decoration: none; }
.tabbar__item[aria-current="page"], .tabbar__item.is-active { color: var(--accent, #0e7c4a); }

.tabbar-sheet__scrim { position: absolute; inset: 0; width: 100%; border: 0; background: rgba(0, 0, 0, .5); }
.tabbar-sheet__panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--surface, #ffffff); border-top: 1px solid var(--border, #e3e8ee);
  border-radius: var(--radius-3, 16px) var(--radius-3, 16px) 0 0;
  padding: var(--space-4, 16px) var(--space-4, 16px) calc(var(--space-5, 24px) + env(safe-area-inset-bottom, 0px));
  max-height: 78vh; overflow-y: auto;
  animation: tabbar-sheet-up .16s ease-out;
}
@keyframes tabbar-sheet-up { from { transform: translateY(16px); opacity: .5; } }
.tabbar-sheet__title {
  margin: 0 0 var(--space-3, 12px); font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-muted, #6b7785);
}
.tabbar-sheet__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: var(--space-2, 8px);
}
.tabbar-sheet__grid a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2, 8px);
  padding: var(--space-3, 12px); border: 1px solid var(--border, #e3e8ee);
  border-radius: var(--radius-2, 8px);
  color: var(--text, #17222e); font-size: .86rem; font-weight: 600;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.tabbar-sheet__grid a[aria-current="page"] { border-color: var(--accent, #0e7c4a); color: var(--accent, #0e7c4a); }
.tabbar-sheet__grid a:hover { background: var(--surface-raised, #f2f5f8); text-decoration: none; }

/* Native-app feel: no tap flash, no double-tap zoom delay. */
a, button, label, summary { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }