.nav-step { display: none; }
@media (max-width: 900px) {
  :root { --header: 48px; }
  .shell { grid-template-rows: var(--header) 48px minmax(0, 1fr); }
  .brand { padding: 6px 12px; }
  .brand::before { width: 45px; height: 30px; }
  .rail { flex-direction: row; }
  .surface-nav { min-width: 0; }
  .surface-nav button { width: auto; min-width: 0; min-height: 47px; flex: 0 0 auto; padding: 0 14px; }
  .nav-topline { display: none; }
  .nav-title { margin: 0; font-size: 15px; white-space: nowrap; }
  .nav-step { display: grid; place-items: center; flex: 0 0 44px; width: 44px; padding: 0; border: 0; background: var(--surface); color: var(--text); cursor: pointer; }
  .nav-step:first-child { border-right: 1px solid var(--border); }
  .nav-step:last-child { border-left: 1px solid var(--border); }
  .nav-step:disabled { color: var(--low); cursor: default; opacity: .4; }
  .nav-step:focus-visible { outline: 2px solid var(--active-accent); outline-offset: -3px; }
  .nav-step svg { width: 18px; height: 18px; }
}