/* Sign in / sign up / password pages: a narrow centred card, like GitHub's. Uses the site colour variables
   so it works on the dark public pages and the light admin pages. */
.auth-wrap {
  width: min(400px, calc(100% - 32px));
  margin: 24px auto 64px;
}
.auth-title {
  margin: 0 0 18px;
  text-align: center;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text);
}
.auth-sub {
  margin: -8px 0 20px;
  text-align: center;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.5;
}
.auth-card {
  background: var(--panel, #fff);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 22px 20px;
}
.auth-card + .auth-card,
.auth-footer {
  margin-top: 14px;
}
.auth-footer {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  text-align: center;
  font-size: 0.95rem;
  color: var(--text);
}
.auth-footer a,
.auth-card a {
  color: var(--accent);
  font-weight: 600;
}
.auth-field { margin-bottom: 16px; }
.auth-label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.auth-field label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--text);
}
.auth-label-row a { font-size: 0.85rem; font-weight: 500; }
.auth-field input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--field-border, rgba(31,36,42,0.2));
  border-radius: 8px;
  background: var(--field, #fff);
  color: var(--text);
  font: inherit;
  font-size: 0.95rem;
}
.auth-field input[readonly] { opacity: 0.75; }
.auth-password { position: relative; }
.auth-password input { padding-right: 64px; }
.auth-show {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  padding: 4px 8px;
  border: none;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}
.auth-hint {
  margin: 8px 0 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--muted);
}
.auth-hint .ok { color: #2e9e5b; font-weight: 600; }
.auth-hint .bad { color: #d4543c; font-weight: 600; }
.auth-btn {
  width: 100%;
  padding: 11px 16px;
  border: none;
  border-radius: 8px;
  background: #17406d;
  color: #fff;
  font: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.15s ease;
}
.auth-btn:hover { background: #0f2d4d; }
/* Buttons that are links: beat the ".auth-card a" link colour */
.auth-card a.auth-btn,
.auth-card a.auth-btn:hover {
  color: #fff;
  text-decoration: none;
}
.auth-card a.auth-btn.secondary,
.auth-card a.auth-btn.secondary:hover {
  color: var(--text);
}
.auth-btn:disabled { opacity: 0.6; cursor: default; }
.auth-btn.secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}
.auth-btn.secondary:hover { background: rgba(127, 127, 127, 0.1); }
.auth-alert {
  margin-bottom: 16px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 0.9rem;
  line-height: 1.5;
}
.auth-alert.error { background: rgba(212, 84, 60, 0.12); border: 1px solid rgba(212, 84, 60, 0.45); color: var(--text); }
.auth-alert.success { background: rgba(46, 158, 91, 0.12); border: 1px solid rgba(46, 158, 91, 0.45); color: var(--text); }
.auth-alert.info { background: rgba(23, 64, 109, 0.1); border: 1px solid rgba(23, 64, 109, 0.35); color: var(--text); }
.auth-note {
  margin: 6px 0 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: #d4543c;
}
.auth-actions { display: flex; flex-direction: column; gap: 10px; }