/* Below 860px the sidebar becomes an off-canvas drawer. Desktop rules in
   dashboard.css apply by default; these override downward. */

@media (max-width: 859px) {
  .app-shell {
    display: block;
  }

  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 40;
    width: min(280px, 86vw);
    transform: translateX(-102%);
    transition: transform var(--t) var(--ease-out);
    box-shadow: var(--shadow-lg);
    border-right: 1px solid var(--line);
  }

  .sidebar.open {
    transform: none;
  }

  .mobile-menu {
    display: inline-flex;
  }

  /* .topbar derives its bleed from these, so it needs no override. */
  .main {
    --gutter: 16px;
    --main-top: 16px;
    padding: var(--main-top) var(--gutter) 56px;
  }

  .topbar {
    margin-bottom: 22px;
    padding: 12px var(--gutter);
  }

  .vault-title h1,
  .page-head h1 {
    font-size: 24px;
  }

  .title-tools {
    width: 100%;
  }

  .title-tools select {
    flex: 1;
  }

  .two-col {
    grid-template-columns: 1fr;
  }

  .modal {
    padding: 12px;
  }

  .modal-box {
    padding: 20px;
  }

  .auth-shell {
    padding: 84px 16px 32px;
  }

  .auth-card {
    padding: 24px;
  }

  .toast-area {
    left: 14px;
    right: 14px;
    bottom: 14px;
    justify-items: stretch;
  }

  .toast {
    max-width: none;
  }

  .otp-boxes {
    gap: 7px;
  }

  .otp-boxes input {
    width: 100%;
    height: 54px;
    font-size: 21px;
  }

  .actions .btn {
    flex: 1;
  }

  .actions .btn.danger {
    flex: 1 0 100%;
    margin-right: 0;
    order: 3;
  }
}

/* --- Landing ----------------------------------------------------------- */

@media (max-width: 859px) {
  .container {
    padding: 0 16px;
  }

  .landing-header {
    padding-top: 18px;
  }

  .landing-main {
    padding: 24px 0 56px;
  }

  .hero-title {
    max-width: 100%;
  }

  .hero-copy {
    font-size: 16px;
    margin: 16px auto 26px;
  }

  .hero-cta .btn {
    flex: 1 1 100%;
  }

  .hero-features {
    margin-top: 44px;
  }
}

@media (max-width: 400px) {
  .password-grid {
    grid-template-columns: 1fr;
  }
}