/* /login and /register. Tokens, nav, buttons and fields come from ui.css. */

.auth-main {
  min-height: calc(100vh - 65px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-5);
  padding: var(--s-7) var(--gutter) var(--s-8);
  background-image:
    linear-gradient(180deg, var(--paper) 0%, transparent 30%, transparent 70%, var(--paper) 100%),
    radial-gradient(var(--dot) 1.1px, transparent 1.5px);
  background-size: auto, 8px 8px;
}

.auth-card {
  position: relative;
  width: min(100%, 420px);
  padding: var(--s-6) var(--s-6) var(--s-5);
  background: var(--sheet);
  border: 1.5px solid var(--ink);
  border-radius: var(--r-sheet);
  box-shadow: var(--lift);
}

.auth-title {
  font-family: var(--font-letter);
  font-weight: 400;
  font-size: var(--t-2xl);
  line-height: 1.2;
}

.auth-card .subtitle {
  margin: var(--s-2) 0 var(--s-5);
  color: var(--ink-2);
  font-size: var(--t-sm);
  line-height: 1.65;
}

.auth-card .subtitle strong {
  padding: 0 4px;
  border-radius: 3px;
  background: var(--yellow);
  color: #1f2348;
}

.field { margin-bottom: var(--s-4); }

.input[aria-invalid="true"] { border-color: var(--red); }

.field-hint:empty { display: none; }
.field-hint.error { color: var(--red); }

.submit { margin-top: var(--s-2); }

.notice {
  margin-bottom: var(--s-4);
  padding: 10px 14px;
  border-radius: var(--r-control);
  font-size: var(--t-sm);
  line-height: 1.55;
}

.notice.error { background: var(--red-soft); color: var(--red); }
.notice.info { background: var(--yellow-soft); color: var(--ink); }

.alt {
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--tone);
  text-align: center;
  color: var(--ink-2);
  font-size: var(--t-sm);
}

.alt a,
.auth-aside a {
  color: var(--ink);
  font-weight: 600;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--yellow);
  text-underline-offset: 4px;
}

.auth-aside { color: var(--ink-3); font-size: var(--t-sm); text-align: center; }

@media (max-width: 480px) {
  .auth-main { justify-content: flex-start; padding-top: var(--s-5); }
  .auth-card { padding: var(--s-5) 20px; }
}