/* Sign in / Create account (views/auth-page.mjs).

   Design baseline: "Matrix 登录与注册页面优化方案 v1.0" — near-black page, dark
   card 440px wide (32px padding on desktop, 16px page margin on phones), 48px
   inputs and primary button, 8px radius, brand blue as the one primary colour.

   Colours are LITERAL and scoped to .mx-auth, never var(--mx-*): the page must
   read the same under every theme (the t45u toast regression was exactly a
   theme token resolving to dark-on-dark). test/auth-contrast-guard.test.mjs
   parses the --auth-* tokens below and fails the build if a text/background
   pair drops under WCAG AA (4.5:1 text, 3:1 control borders and focus ring).
   If it fails, fix the colours, not the test. */

.mx-auth {
  --auth-bg: #0C1118;
  --auth-card: #151C25;
  --auth-field: #0C1118;
  --auth-ink: #F0F4FA;
  --auth-muted: #A9B6C9;
  --auth-brand: #347CF0;
  --auth-brand-hover: #5B97F5;
  --auth-on-brand: #0C1118;
  --auth-link: #6FA6FF;
  --auth-border: #6B7B92;
  --auth-divider: #38475A;
  --auth-focus: #8DB8FF;
  --auth-error: #FFB4B4;
  --auth-error-border: #FF8A8A;
  --auth-ok: #7DDBA3;
  --auth-secondary: #212B38;
  --auth-secondary-hover: #2B3747;

  box-sizing: border-box;
  max-width: none;
  margin: 0;
  padding: 40px 16px 64px;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--auth-bg);
  color: var(--auth-ink);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Roboto, sans-serif;
}
.mx-auth *, .mx-auth *::before, .mx-auth *::after { box-sizing: border-box; }

.mx-auth .mx-auth__card {
  width: 100%;
  max-width: 440px;
  padding: 32px;
  background: var(--auth-card);
  border: 1px solid var(--auth-divider);
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
}

.mx-auth .mx-auth__head { display: block; margin: 0 0 24px; }
.mx-auth .mx-auth__title {
  margin: 0; font-size: 24px; line-height: 1.25; letter-spacing: -.01em; font-weight: 650; color: var(--auth-ink);
}
.mx-auth .mx-auth__sub { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--auth-muted); }

.mx-auth .mx-auth__form { display: block; margin: 0; }
.mx-auth .mx-auth__field { margin: 0 0 16px; }
.mx-auth .mx-auth__label { display: block; margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--auth-ink); }
.mx-auth .mx-auth__control { position: relative; display: flex; gap: 8px; }

.mx-auth .mx-auth__input {
  display: block; flex: 1 1 auto; width: 100%; min-width: 0; height: 48px; margin: 0; padding: 0 14px;
  font: inherit; font-size: 15px; color: var(--auth-ink); background: var(--auth-field);
  border: 1px solid var(--auth-border); border-radius: 8px; outline: none; box-shadow: none;
}
.mx-auth .mx-auth__input::placeholder { color: #8A99AF; -webkit-text-fill-color: #8A99AF; opacity: 1; }
.mx-auth .mx-auth__input:hover { border-color: #8696AD; }
.mx-auth .mx-auth__input:focus-visible,
.mx-auth .mx-auth__input:focus { border-color: var(--auth-focus); box-shadow: 0 0 0 3px rgba(141, 184, 255, .35); }
.mx-auth .mx-auth__input[aria-invalid="true"] { border-color: var(--auth-error-border); }
.mx-auth .mx-auth__input:-webkit-autofill {
  -webkit-text-fill-color: var(--auth-ink); caret-color: var(--auth-ink);
  -webkit-box-shadow: 0 0 0 1000px var(--auth-field) inset;
}
.mx-auth .mx-auth__control--toggle .mx-auth__input { padding-right: 72px; }
.mx-auth .mx-auth__control--send .mx-auth__input { letter-spacing: .18em; font-variant-numeric: tabular-nums; }
.mx-auth .mx-auth__control--send .mx-auth__input::placeholder { letter-spacing: normal; }

.mx-auth .mx-auth__toggle {
  position: absolute; top: 4px; right: 4px; height: 40px; min-width: 56px; padding: 0 12px; margin: 0;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--auth-link); background: transparent;
  border: 0; border-radius: 6px; cursor: pointer;
}
.mx-auth .mx-auth__toggle:hover { background: var(--auth-secondary); }

.mx-auth .mx-auth__send {
  flex: 0 0 auto; min-width: 116px; height: 48px; margin: 0; padding: 0 14px; font: inherit; font-size: 14px; font-weight: 600;
  color: var(--auth-ink); background: var(--auth-secondary); border: 1px solid var(--auth-border); border-radius: 8px; cursor: pointer;
  white-space: nowrap;
}
.mx-auth .mx-auth__send:hover:not(:disabled) { background: var(--auth-secondary-hover); }
.mx-auth .mx-auth__send:disabled { color: var(--auth-muted); cursor: not-allowed; opacity: 1; }

.mx-auth .mx-auth__hint { margin: 6px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--auth-muted); }
.mx-auth .mx-auth__error {
  margin: 6px 0 0; font-size: 13px; line-height: 1.4; color: var(--auth-error);
}
.mx-auth .mx-auth__error[hidden] { display: none; }
/* The glyph + words carry the error; the red tint is only reinforcement. */
.mx-auth .mx-auth__error::before { content: "! "; font-weight: 800; }

.mx-auth .mx-auth__aux { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin: -4px 0 16px; }
.mx-auth .mx-auth__aux--end { justify-content: flex-end; }
.mx-auth .mx-auth__textlink, .mx-auth .mx-auth__link {
  display: inline; margin: 0; padding: 4px 0; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--auth-link);
  background: none; border: 0; border-radius: 4px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.mx-auth .mx-auth__textlink:hover, .mx-auth .mx-auth__link:hover { color: #A8C8FF; }

.mx-auth .mx-auth__status { margin: 0 0 16px; font-size: 13.5px; line-height: 1.45; color: var(--auth-muted); }
.mx-auth .mx-auth__status:empty { display: none; }
.mx-auth .mx-auth__status[data-state="ok"] { color: var(--auth-ok); }
.mx-auth .mx-auth__status[data-state="error"] {
  padding: 10px 12px; color: var(--auth-error); background: rgba(255, 138, 138, .1);
  border: 1px solid var(--auth-error-border); border-radius: 8px;
}
.mx-auth .mx-auth__status[data-state="error"]::before { content: "! "; font-weight: 800; }

.mx-auth .mx-auth__primary,
.mx-auth .mx-auth__google,
.mx-auth .mx-auth__secondary {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 48px; margin: 0; padding: 0 16px;
  font: inherit; font-size: 15px; font-weight: 650; border-radius: 8px; cursor: pointer;
}
.mx-auth .mx-auth__primary { color: var(--auth-on-brand); background: var(--auth-brand); border: 1px solid var(--auth-brand); }
.mx-auth .mx-auth__primary:hover:not(:disabled) { background: var(--auth-brand-hover); border-color: var(--auth-brand-hover); }
.mx-auth .mx-auth__primary:disabled { cursor: progress; opacity: 1; }
.mx-auth .mx-auth__google,
.mx-auth .mx-auth__secondary { color: var(--auth-ink); background: var(--auth-secondary); border: 1px solid var(--auth-border); }
.mx-auth .mx-auth__google:hover:not(:disabled),
.mx-auth .mx-auth__secondary:hover:not(:disabled) { background: var(--auth-secondary-hover); }
.mx-auth .mx-auth__google:disabled { cursor: progress; }
.mx-auth .mx-auth__secondary { margin-top: 10px; }

.mx-auth :is(button, a, input, [tabindex]):focus-visible { outline: 3px solid var(--auth-focus); outline-offset: 2px; }
.mx-auth .mx-auth__input:focus-visible { outline-offset: 0; }

.mx-auth .mx-auth__divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--auth-muted); font-size: 13px; }
.mx-auth .mx-auth__divider::before, .mx-auth .mx-auth__divider::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--auth-divider); }

.mx-auth .mx-auth__switch { margin: 24px 0 0; text-align: center; font-size: 14px; color: var(--auth-muted); }
.mx-auth .mx-auth__switch[hidden] { display: none; }
.mx-auth .mx-auth__legal { margin: 20px 0 0; text-align: center; font-size: 12.5px; line-height: 1.5; color: var(--auth-muted); }
.mx-auth .mx-auth__legal-name { color: var(--auth-ink); }

.mx-auth .mx-auth__field--check { margin-bottom: 16px; }
.mx-auth .mx-auth__check { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.45; color: var(--auth-ink); cursor: pointer; }
.mx-auth .mx-auth__check input {
  flex: 0 0 auto; appearance: none; -webkit-appearance: none; display: grid; place-content: center; width: 20px; height: 20px; margin: 1px 0 0;
  background: var(--auth-field); border: 1px solid var(--auth-border); border-radius: 4px; cursor: pointer;
}
.mx-auth .mx-auth__check input:checked { background: var(--auth-brand); border-color: var(--auth-brand); }
.mx-auth .mx-auth__check input:checked::after { content: ""; width: 5px; height: 10px; margin-top: -2px; border: solid var(--auth-on-brand); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.mx-auth .mx-auth__check input[aria-invalid="true"] { border-color: var(--auth-error-border); }
.mx-auth .mx-auth__empty { padding: 16px; color: var(--auth-muted); border: 1px dashed var(--auth-border); border-radius: 8px; }

/* The sign-in view is one dark surface edge to edge, not a card on a light page. */
html[data-theme] .page:has(> .mx-auth) { background: #0C1118; padding: 0; }

/* Forgot password dialog */
.mx-auth .mx-auth__backdrop {
  position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(5, 8, 12, .72);
}
.mx-auth .mx-auth__backdrop[hidden] { display: none; }
.mx-auth .mx-auth__dialog {
  width: 100%; max-width: 440px; max-height: calc(100dvh - 32px); overflow: auto; padding: 32px;
  background: var(--auth-card); border: 1px solid var(--auth-divider); border-radius: 8px; box-shadow: 0 24px 80px rgba(0, 0, 0, .6);
}
.mx-auth .mx-auth__dialog-title { margin: 0 0 8px; font-size: 20px; line-height: 1.3; font-weight: 650; color: var(--auth-ink); }
.mx-auth .mx-auth__dialog .mx-auth__sub { margin: 0 0 20px; }

@media (max-width: 480px) {
  .mx-auth { padding: 16px 16px 40px; }
  .mx-auth .mx-auth__card, .mx-auth .mx-auth__dialog { padding: 24px 20px; }
  .mx-auth .mx-auth__control--send { flex-wrap: wrap; }
  .mx-auth .mx-auth__send { min-width: 0; flex: 0 0 auto; }
  .mx-auth .mx-auth__control--send .mx-auth__input { flex: 1 1 120px; }
}
@media (prefers-reduced-motion: no-preference) {
  .mx-auth .mx-auth__input, .mx-auth .mx-auth__primary, .mx-auth .mx-auth__send { transition: border-color .12s, box-shadow .12s, background-color .12s; }
}