/* A stable mobile app bar; its reserved height never depends on scroll state. */
.period-dock { animation: none; transition: none; }
.period-anchor, .topbar { overflow-anchor: none; }
@media (max-width: 850px) {
  :root { --mobile-header-height: calc(58px + env(safe-area-inset-top, 0px)); }
  .app-shell > .main { padding-top: var(--mobile-header-height); }
  .app-shell > .main > .topbar {
    position: fixed; inset: 0 0 auto 0; width: 100%;
    height: var(--mobile-header-height); min-height: var(--mobile-header-height);
    padding-top: env(safe-area-inset-top, 0px); z-index: 40;
    background: var(--bg, #f5f5f7); backdrop-filter: none;
    -webkit-backdrop-filter: none; transform: none; transition: none;
  }
  .app-shell > .main > .topbar .period-dock {
    background: var(--bg, #f5f5f7);
    padding-top: calc(9px + env(safe-area-inset-top, 0px));
  }
  .app-shell > .main > .topbar.has-period-dock > .mobile-menu-toggle {
    top: calc(9px + env(safe-area-inset-top, 0px));
  }
}