/* App shell: keep the persistent controls quiet and make the current section obvious. */
.app-frame { min-height: 100dvh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }

@media (max-width: 760px) {
  main { min-height: 0; }
  .topbar { height: 54px; }
  .brand { gap: 8px; }
  .brand-wordmark-image { width: 36px; height: 36px; }
  .top-actions { gap: 5px; }
  .mobile-nav {
    gap: 3px;
    padding: 5px 6px calc(5px + env(safe-area-inset-bottom));
  }
  .mobile-nav button {
    min-width: 0;
    min-height: var(--mobile-nav-min-height);
    gap: 2px;
    padding: 4px 1px 3px;
    border-radius: 10px;
    transition: color var(--motion-fast) var(--motion-ease), background-color var(--motion-fast) var(--motion-ease);
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-nav button.active { background: var(--mobile-nav-selected-surface); }
  .toast { bottom: calc(var(--mobile-toast-offset) + env(safe-area-inset-bottom)); }
  .mobile-nav button span[data-i18n] {
    max-width: 100%;
    overflow: hidden;
    font-size: var(--mobile-nav-label-size);
    font-weight: var(--font-weight-medium);
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mobile-nav-icon svg { width: 18px; height: 18px; }
}

@media (max-width: 350px) {
  .mobile-nav { gap: 1px; padding-right: 2px; padding-left: 2px; }
  .mobile-nav button span[data-i18n] { letter-spacing: -0.015em; }
}