/* The phone tab bar (redesign step 5b; choice 1 of the approved prototype): Home, Events, Buzz It, Flyers and Places,
   fixed to the bottom of the screen on phones, with Buzz It raised in the middle. Used by the server-built pages
   (services/eventPages.js tabBar) and the map page. A page makes room for it with --tab-bar, which is 0 elsewhere. */
:root { --tab-bar: 0px; }
.tab-bar { display: none; }
@media (max-width: 760px), (max-width: 940px) and (max-height: 500px) {
  :root { --tab-bar: calc(62px + env(safe-area-inset-bottom)); }
  .tab-bar {
    position: fixed; right: 0; bottom: 0; left: 0; z-index: 20;
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end;
    min-height: var(--tab-bar);
    padding: 4px max(4px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(4px, env(safe-area-inset-left));
    border-top: 1px solid var(--line);
    background: var(--bg); background: color-mix(in srgb, var(--bg) 88%, transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(16px); backdrop-filter: saturate(1.4) blur(16px);
  }
  .tab-bar > a, .tab-bar > button {
    display: grid; justify-items: center; align-content: end; gap: 3px; min-height: 56px; padding: 0 0 6px;
    border: 0; background: none; color: var(--ink-3); font: 600 11px/1.2 var(--font); text-decoration: none; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .tab-bar svg { width: 22px; height: 22px; }
  .tab-bar [aria-current="page"] { color: var(--ink); }
  .tab-bar .tab-buzz { color: var(--ink); font-weight: 700; }
  .tab-buzz-icon {
    display: grid; place-items: center; width: 54px; height: 54px; margin-top: -24px;
    border: 3px solid var(--bg); border-radius: 50%; background: var(--buzz); color: #ffffff;
    box-shadow: 0 8px 22px rgba(89, 38, 166, 0.35);
  }
  .tab-buzz-icon svg { width: 26px; height: 26px; }
  .tab-bar > :focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: 12px; }
  body.account-open .tab-bar, body.drawer-open .tab-bar { display: none; }
}
@media print { .tab-bar { display: none; } }