/*
 * Mobile bottom tab bar (M-01, AM-01): sage bar, top radius 28px, padding 8px 8px 26px; each tab is a
 * 20px icon in a 48x30 pill above an 11px/700 label; the active tab's pill is bg at 16%.
 * Sticky to the bottom of the viewport so it never covers the end of the page. Hidden >= 768.
 */
@layer layout {
  .tabbar {
    position: sticky;
    bottom: 0;
    z-index: 40;
    margin-top: auto;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: 8px 8px max(26px, env(safe-area-inset-bottom));
    border-radius: var(--radius-card) var(--radius-card) 0 0;
    background: var(--color-rail);
  }
  .tabbar--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  @media (min-width: 768px) {
    .app > .tabbar { display: none; }
  }

  .tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 52px;
    color: var(--color-rail-muted);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
  }
  .tab:hover { color: var(--color-rail-contrast); }
  .tab:focus-visible { outline-color: var(--color-rail-contrast); outline-offset: -2px; border-radius: 16px; }

  .tab__icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 48px;
    height: 30px;
    border-radius: var(--radius-pill);
    font-size: 20px;
  }

  .tab.is-active,
  .tab[aria-current="page"] { color: var(--color-rail-contrast); }
  .tab.is-active .tab__icon,
  .tab[aria-current="page"] .tab__icon {
    background: color-mix(in srgb, var(--color-rail-contrast) 16%, transparent);
  }
}