@media (max-width: 900px) {
  .mobile-nav-close {
    display: grid;
    place-items: center;
    position: absolute;
    top: 14px;
    right: 12px;
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    color: #d7e0e4;
    font-size: 28px;
  }

  .app.nav-open aside {
    display: flex;
    position: fixed;
    inset: 0 auto 0 0;
    width: min(82vw, 300px);
    height: 100dvh;
    z-index: 30;
    box-shadow: 18px 0 50px #07151e55;
  }

  .app.nav-open::after {
    content: "";
    position: fixed;
    inset: 0;
    background: #07151e99;
    z-index: 29;
  }

  .mobile-menu {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 6px;
    font-size: 20px;
  }

  .mobile-menu:focus-visible { outline: 3px solid #52798a55; }
  section.page > .card:has(> table) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  section.page > .card:has(> table) > table { min-width: 680px; }
  dialog { max-height: calc(100dvh - 24px); overflow: auto; }
  dialog form { padding: 22px; }
  .primary, .secondary, select, input { min-height: 44px; }
}

@media (min-width: 901px) { .mobile-nav-close { display: none; } }

@media (max-width: 650px) {
  .analysis-controls { padding: 12px; }
  .analysis-controls > button { width: 100%; }
  .pie-wrap { align-items: stretch; }
  .expense-pie { align-self: center; }
  .analysis-account-picker .account-picker-menu { position: static; margin-top: 6px; width: 100%; }
  .analysis-table { padding: 14px; }
  .analysis-table table { min-width: 680px; }
}

@media (max-width: 540px) {
  .login-panel { padding: 24px 20px; }
  .login-card .brand { margin-bottom: 42px; }
  .page { padding: 18px 12px; }
  .card { padding: 15px; }
  .page h1 { font-size: 27px; }
  .page-head { margin-bottom: 18px; }
}