/* ============================================================
   auth.css -- Login/signup/account page forms.
   Part of the split from the original single style.css.
   ============================================================ */

/* ---------- AUTH FORMS (signup/login/account) ---------- */
.auth-panel { max-width: 32rem; width: 100%; margin: 0 auto 1.5rem; }

/* Account settings page: several small independent cards, not sequential
   reading content, so a grid makes far better use of wide screens than the
   default single-column stack every other <main> uses. */
#settingsTab {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: start;
  gap: 1.5rem;
}

#settingsTab .auth-panel {
  max-width: none;
  margin: 0;
}

#adminTab {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

#settingsTab[hidden], #adminTab[hidden] {
  display: none;
}

.tab-bar {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 2px solid var(--border-soft);
}

.tab-btn {
  font-family: var(--font-term);
  font-size: 1rem;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 0.6rem 1rem;
  cursor: pointer;
  color: var(--ink);
  opacity: 0.6;
}

.tab-btn:hover { opacity: 0.85; }
.tab-btn.active { opacity: 1; border-bottom-color: var(--stain-brown); font-weight: bold; }
.tab-btn:focus-visible { outline: 3px solid var(--cursed-green); outline-offset: 2px; }

.span-full {
  grid-column: 1 / -1;
}

@media (max-width: 700px) {
  #settingsTab {
    grid-template-columns: 1fr;
  }
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.auth-form label {
  font-family: var(--font-term);
  font-size: 0.95rem;
  opacity: 0.75;
  margin-bottom: -0.3rem;
}

.auth-form input {
  font-family: var(--font-term);
  font-size: 1.05rem;
  padding: 0.55rem 0.75rem;
  border: 1.5px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--fluoro-white);
  color: var(--ink);
}

.auth-form textarea, .auth-form select {
  font-family: var(--font-term);
  font-size: 1.05rem;
  padding: 0.55rem 0.75rem;
  border: 1.5px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--fluoro-white);
  color: var(--ink);
  resize: vertical;
}

.auth-form textarea:focus-visible, .auth-form select:focus-visible {
  outline: 3px solid var(--cursed-green);
  outline-offset: 1px;
}

.auth-form input:focus-visible {
  outline: 3px solid var(--cursed-green);
  outline-offset: 1px;
}

.auth-message {
  font-family: var(--font-term);
  font-size: 0.95rem;
  margin: 0.3rem 0 0;
  min-height: 1.2rem;
}

.auth-message.success { color: var(--stain-brown); }
.auth-message.error { color: var(--danger-red); }

.search-danger-range {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
}

.search-danger-range select {
  margin-bottom: 0;
}