/* ─── Shared auth styles ─────────────────────────────────────────────────────
   Loaded by shared auth templates (login, register, account, admin).
   Uses the canonical CSS custom properties defined by each site's style.css.
   Sites that use different variable names must alias them in their :root.
   ─────────────────────────────────────────────────────────────────────────── */

/* ─── Layout helpers ─────────────────────────────────────────────────────── */

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 5rem 2.5rem;
}

@media (max-width: 640px) {
  .container { padding: 3.5rem 1.5rem; }
}

.page-heading { margin-bottom: 4rem; }

.page-heading h1 {
  font-family: var(--font-serif);
  font-size: clamp(2.8rem, 4.5vw, 4.5rem);
  font-weight: 300;
  letter-spacing: 0.01em;
  margin-bottom: 0.75rem;
  line-height: 1.0;
}

.page-heading p {
  color: var(--text-muted);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ─── Login / register card ──────────────────────────────────────────────── */

.login-outer {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - var(--nav-height));
  padding: 2rem;
}

.login-card {
  width: 100%;
  max-width: 360px;
}

/* Heading inside a login card (e.g. contact page) is centered like the card's own h1/p. */
.login-card .page-heading { text-align: center; }

.login-card h1 {
  font-family: var(--font-serif);
  font-size: 2.5rem;
  font-weight: 300;
  text-align: center;
  margin-bottom: 0.5rem;
  letter-spacing: 0.02em;
}

.login-card > p {
  color: var(--text-secondary);
  text-align: center;
  margin-bottom: 3rem;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* ─── Form fields ────────────────────────────────────────────────────────── */

.form-group { margin-bottom: 1.75rem; }

.form-group label {
  display: block;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
  color: var(--text-secondary);
}

.form-group input,
.form-group textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: 0.6rem 0;
  color: var(--text);
  font-size: 0.95rem;
  font-family: inherit;
  transition: border-color 0.2s;
  outline: none;
}

.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--text-muted); }

.form-group input:focus,
.form-group textarea:focus { border-bottom-color: var(--accent); }

.form-group textarea { min-height: 120px; resize: vertical; }

/* ─── Password strength rules (register page) ────────────────────────────── */

.password-rules {
  list-style: none;
  padding: 0;
  margin: 0.6rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.password-rules li {
  font-size: 0.75rem;
  padding-left: 1.25rem;
  position: relative;
  transition: color 0.15s;
}

.password-rules li::before {
  content: '✗';
  position: absolute;
  left: 0;
  font-size: 0.7rem;
  transition: color 0.15s;
}

.rule--unmet { color: var(--text-muted); }
.rule--unmet::before { color: var(--text-muted); }

.rule--met { color: #4ade80; }
.rule--met::before { content: '✓'; color: #4ade80; }

.field-hint {
  display: block;
  font-size: 0.75rem;
  margin-top: 0.35rem;
  transition: color 0.15s;
}

.field-hint--ok    { color: #4ade80; }
.field-hint--error { color: #f87171; }

/* ─── Buttons ────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 0.85rem 2.25rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
  font-family: inherit;
}

.btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.btn:active { opacity: 0.75; }

.btn-logout {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
  transition: border-color 0.15s, color 0.15s;
}

.btn-logout:hover { border-color: #c0392b; color: #c0392b; }

.btn-danger {
  background: transparent;
  border: 1px solid #c0392b;
  border-radius: 3px;
  color: #c0392b;
  cursor: pointer;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.btn-danger:hover { background: #c0392b; color: #fff; }

/* ─── Flash messages ─────────────────────────────────────────────────────── */

.flash {
  padding: 0.8rem 1rem;
  margin-bottom: 1.75rem;
  font-size: 0.85rem;
  border-left: 3px solid;
}

.flash-success {
  background: rgba(16, 185, 129, 0.05);
  border-color: #34d399;
  color: #34d399;
}

.flash-error {
  background: rgba(239, 68, 68, 0.05);
  border-color: #f87171;
  color: #f87171;
}

.flash p { margin: 0; }
.flash p + p { margin-top: 0.25rem; }