/* Accounts app: login, register, and other auth templates (extends base_auth.html). */

:root {
  --auth-column-width: 500px;
  --auth-focus-ring: 0 0 0 3px rgba(47, 133, 90, 0.2);
}

/* --- Page shell ---------------------------------------------------------- */

main.page-main-auth {
  width: var(--auth-column-width);
  max-width: calc(100% - 20px);
  margin: auto;
  height: calc(100vh - 200px);
  background: var(--tertiary);
  color: var(--text2);
  border: 2px solid var(--primary);
  border-radius: 10px;
  overflow: auto;
  box-sizing: border-box;
}

/* --- Layout & cards ------------------------------------------------------ */

.auth-card {
  width: var(--auth-column-width);
  max-width: 100%;
  margin: 20px auto 40px;
  color: var(--text3);
}

/* --- Headings & paragraphs ----------------------------------------------- */

.auth-card h1 {
  margin: 0 0 10px;
  color: var(--primary);
}

.auth-card p {
  color: var(--text2);
}

/* --- Forms --------------------------------------------------------------- */

.auth-form {
  margin-top: 4px;
}

/* Rows from {{ form.as_p }} (<p>). */
.auth-card form p {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.auth-card input,
.auth-card select {
  padding: 8px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font: inherit;
  color: var(--text3);
  background: var(--tertiary);
}

.auth-card input:focus,
.auth-card select:focus {
  border-color: var(--primary);
  box-shadow: var(--auth-focus-ring);
  outline: none;
}

.auth-card ul.errorlist {
  margin: 0 0 6px;
  color: #c53030;
  padding-left: 18px;
}

/* --- Links below forms --------------------------------------------------- */

.auth-link-row {
  margin: 14px 0 0;
}

.auth-link-row a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
}

.auth-link-row a:hover {
  color: var(--secondary);
}