/**
 * Atelier — Mobile bottom nav (C17). Fixed bottom tab bar, mobile only
 * (hidden >= 768px). Icons are text/emoji glyphs to avoid an icon-font
 * dependency; swap for an SVG sprite when one is added to the theme.
 */
.atl-mobile-nav { display: none; }

@media (max-width: 767px) {
  .atl-mobile-nav {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    background: var(--atl-surface);
    border-top: 1px solid var(--atl-border);
  }
  .atl-mobile-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 9px 0 8px;
    text-decoration: none;
    color: var(--atl-text-subtle);
    font-size: 10.5px;
    letter-spacing: 0.04em;
  }
  .atl-mobile-nav-item[data-active] { color: var(--atl-accent); font-weight: 600; }
  .atl-mobile-nav-item:focus-visible { outline: 2px solid var(--atl-focus-ring); outline-offset: -2px; }
  .atl-mobile-nav-icon { position: relative; display: inline-block; font-size: 18px; line-height: 1; }
  .atl-mobile-nav-badge {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(60%, -40%);
    background: var(--atl-accent);
    color: var(--atl-band-text);
    font-size: 9px;
    font-weight: 600;
    border-radius: 999px;
    padding: 1px 5px;
    line-height: 1.4;
  }
}