/* Account screens, filled by Web core: sign-in (login.js), change password (password.js), 404 (notfound.js).
   Working tokens only; the login panel is a data-theme="dark" block, so its tokens are the dark ones. */

/* ---------- sign-in: full window (FT-041), no 100vw ---------- */
.login { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); inline-size: 100%; min-block-size: 100vh; min-block-size: 100dvh; background: var(--bg); }
@media (min-width: 1440px) { .login { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }

.login__panel { display: flex; flex-direction: column; padding: var(--space-10) clamp(32px, 4vw, 72px); background: var(--bg); color: var(--text); }
.login__panel .motif-mark { inline-size: min(78%, 620px); inset-block-end: -10%; inset-inline-end: -16%; }
.login__panel-inner { display: flex; flex-direction: column; gap: var(--space-12); flex: 1 1 auto; max-inline-size: 600px; }
.login__logo { display: block; block-size: 28px; inline-size: auto; }
.login__copy { display: flex; flex-direction: column; gap: var(--space-5); margin-block: auto; }
.login__title { max-inline-size: 13ch; color: var(--text); text-wrap: balance; }
.login__lead { max-inline-size: 44ch; font-size: var(--fs-read); line-height: var(--lh-body); color: var(--text-muted); }
.login__points { display: flex; flex-direction: column; gap: var(--space-3); margin-block-start: var(--space-2); }
.login__point { display: flex; align-items: flex-start; gap: var(--space-3); color: var(--text-2); }
.login__point .i { flex: none; margin-block-start: 3px; color: var(--text-muted); }

.login__main { display: flex; flex-direction: column; min-width: 0; padding: var(--space-6) clamp(24px, 4vw, 64px); background: var(--bg); }
.login__tools { display: flex; justify-content: flex-end; gap: var(--space-3); }
.login__form { display: flex; flex-direction: column; gap: var(--space-5); inline-size: 100%; max-inline-size: 400px; margin: auto; padding-block: var(--space-10); }
.login__heads { display: flex; flex-direction: column; gap: var(--space-2); margin-block-end: var(--space-2); }
.login__sub { font-size: var(--fs-body); }
.login__submit { margin-block-start: var(--space-2); }

@media (max-width: 899px) {
  .login { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .login__panel { padding: var(--space-4) var(--page-pad); }
  .login__panel .motif-mark { display: none; }
  .login__panel-inner { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-4); max-inline-size: none; }
  .login__logo { block-size: 22px; }
  .login__copy { margin: 0; gap: 0; min-width: 0; }
  .login__kicker, .login__lead, .login__points { display: none; }
  .login__title { max-inline-size: none; font-size: 18px; line-height: 1.2; text-align: end; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .login__main { padding: var(--space-4) var(--page-pad) var(--space-6); }
  .login__form { padding-block: var(--space-8); }
}
@media (max-width: 479px) { .login__title { display: none; } }

/* ---------- change password ---------- */
.account-screen { display: flex; flex-direction: column; }
.account-screen .page-head { margin-block-end: var(--space-6); }
.account-card { padding: var(--space-8); }
.password-form { display: flex; flex-direction: column; gap: var(--space-5); }
.password-form .actions { margin-block-start: var(--space-2); }
@media (max-width: 719px) { .account-card { padding: var(--space-5); } }

/* ---------- not found ---------- */
.notfound { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); padding-block: var(--space-15); text-align: center; }
.notfound__title { max-inline-size: 24ch; }
.notfound__text { max-inline-size: 52ch; }
.notfound__action { margin-block-start: var(--space-3); }