/* Account Vault V18.2 — balanced login and registration layout.
   Visual only. No changes to authentication, vault keys, forms, or backend.
   Loaded after all earlier stylesheets; scoped to .av18-auth-page. */

/* Both login and register share identical column boundaries and alignment. */
.av18-auth-page {
  min-height: 100vh;
  min-height: 100dvh;
  grid-template-columns: minmax(0, 49%) minmax(0, 51%);
  isolation: isolate;
}

.av18-auth-page > .auth-visual,
.av18-auth-page > .auth-content {
  min-width: 0;
}

.av18-auth-page > .auth-visual {
  padding-inline: clamp(32px, 5.75vw, 98px);
  padding-block: clamp(30px, 4.5vh, 54px);
}

/* Same vertical origin for login AND registration. Keep both cards centered
   within the entire right pane, not according to their unequal content. */
.av18-auth-page > .auth-content {
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px clamp(25px, 4.3vw, 76px);
  background: var(--surface, #fff);
}

.av18-auth-page .av18-auth-card {
  box-sizing: border-box;
  width: 100%;
  max-width: 440px;
  min-height: 650px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 0;
}

/* Shared typographic and form rhythm on both views. */
.av18-auth-page .av18-tabbar {
  flex: none;
  margin: 0 0 26px;
  min-height: 46px;
}
.av18-auth-page .av18-auth-card > .overline {
  line-height: 1.5;
}
.av18-auth-page .av18-auth-card > h2 {
  margin-top: 10px;
  margin-bottom: 10px;
  line-height: 1.26;
}
.av18-auth-page .av18-auth-card > .muted {
  margin: 0 0 27px;
  min-height: 23px;
  line-height: 1.6;
}
.av18-auth-page .av18-auth-card .form-stack {
  display: grid;
  gap: 16px;
  margin: 0;
  width: 100%;
}
.av18-auth-page .av18-auth-card .form-stack > label {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.av18-auth-page .av18-auth-card .form-stack > label > input {
  box-sizing: border-box;
  min-height: 44px;
  width: 100%;
}
.av18-auth-page .av18-auth-card .form-stack > .hint {
  margin: 0;
  line-height: 1.55;
}
.av18-auth-page .av18-auth-card .form-stack > .btn {
  min-height: 44px;
  width: 100%;
}
.av18-auth-page .av18-auth-card > .auth-switch {
  flex: none;
  margin: 24px 0 0;
  line-height: 1.6;
}

/* Equal footer baseline: prevent the short login form from floating lower. */
.av18-auth-page .av18-auth-card > .auth-disclaimer {
  margin: auto 0 0;
  padding: 26px 0 0;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

/* Display long server-side registration notices without overlay or clipping. */
.av18-auth-page .av18-register-closed {
  margin-top: 0;
  margin-bottom: 16px;
}

/* Subtle visual balance for the left brand/illustration. */
.av18-auth-page .auth-visual .hero-foot {
  gap: 12px 18px;
  margin-top: clamp(30px, 5vh, 50px);
}
.av18-auth-page .auth-visual .hero-foot span {
  white-space: nowrap;
}

/* Short desktop browser windows: content may scroll, but must never overlap. */
@media (min-width: 901px) and (max-height: 720px) {
  .av18-auth-page > .auth-content {
    align-items: flex-start;
    padding-block: 28px;
  }
  .av18-auth-page .av18-auth-card {
    min-height: 0;
  }
  .av18-auth-page .av18-auth-card > .auth-disclaimer {
    margin-top: 34px;
  }
}

/* Tablets and phones: prioritize the form; avoid squeezed two-column layout. */
@media (max-width: 900px) {
  .av18-auth-page {
    display: block;
    min-height: 100dvh;
  }
  .av18-auth-page > .auth-visual {
    display: none;
  }
  .av18-auth-page > .auth-content {
    min-height: 100dvh;
    align-items: flex-start;
    padding: clamp(28px, 5vh, 56px) clamp(20px, 6vw, 46px);
  }
  .av18-auth-page .av18-auth-card {
    min-height: 0;
    max-width: 450px;
  }
  .av18-auth-page .mobile-brand {
    display: flex;
    margin-bottom: 32px;
  }
  .av18-auth-page .av18-auth-card > .auth-disclaimer {
    margin-top: 32px;
  }
}

@media (max-width: 420px) {
  .av18-auth-page > .auth-content {
    padding: 26px 20px 36px;
  }
  .av18-auth-page .mobile-brand {
    margin-bottom: 28px;
  }
  .av18-auth-page .av18-tabbar {
    margin-bottom: 23px;
  }
  .av18-auth-page .av18-auth-card > .muted {
    margin-bottom: 23px;
  }
  .av18-auth-page .av18-auth-card .form-stack {
    gap: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .av18-auth-page .av18-auth-card {
    animation: none;
  }
}
:root[data-av-motion="off"] .av18-auth-page .av18-auth-card,
:root[data-av-motion="reduced"] .av18-auth-page .av18-auth-card {
  animation: none;
}