/* Authentication pages should remain usable even when JavaScript is unavailable. */
.login > .login-form {
  display: grid;
  gap: 18px;
  width: min(100%, 480px);
  margin: auto;
  padding: 90px 50px;
  background: transparent;
  color: var(--ink);
  place-items: stretch;
  align-content: center;
}
.login > .login-form p { margin: 0; color: var(--muted); font: 400 15px/1.6 'DM Sans', sans-serif; }
.login > .login-form .eyebrow { color: #c97957; font: 700 10px/1.4 'DM Sans', sans-serif; letter-spacing: .2em; }
.login > .login-form h1 { font-size: clamp(36px, 5vw, 50px); }
.login > .login-form > form { display: grid; gap: 18px; width: 100%; max-width: none; padding: 0; margin: 0; }

/* Keep navigation and both account choices reachable on narrow screens. */
@media (max-width: 800px) {
  .login { grid-template-columns: minmax(0, 1fr); }
  .login > .login-form { min-width: 0; width: 100%; padding: 36px 22px; }
  body > header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "logo actions" "nav nav";
    column-gap: 8px;
    row-gap: 6px;
    height: auto;
    min-height: 72px;
    padding: 10px 14px;
  }
  body > header > .logo {
    grid-area: logo;
    width: 90px;
    height: 44px;
    transform: none;
  }
  body > header > div {
    grid-area: actions;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 6px 9px;
    min-width: 0;
    font-size: 12px;
  }
  body > header > div > a:not(.small) { display: inline-flex; }
  body > header > div > .btn.small { padding: 9px 11px; }
  body > header > nav {
    grid-area: nav;
    display: flex;
    width: 100%;
    gap: 16px;
    overflow-x: auto;
    padding: 4px 0 7px;
    white-space: nowrap;
    font-size: 12px;
    scrollbar-width: thin;
  }
}