/* ============================================================================
   Form inputs — text fields for login/register.

   The project had no text-input styles (all prior inputs were radios,
   checkboxes, selects, and file pickers). These follow the .select pattern:
   system font, compact padding, 1px border, focus ring via --ring.
   ========================================================================== */

.text-input {
  font: inherit;
  font-size: .9375rem;
  padding: .5rem .65rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  width: 100%;
  box-sizing: border-box;
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}

.text-input::placeholder {
  color: var(--text-faint);
}

.text-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}

/* Login/register form layout */
.auth-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
  max-width: 480px;
  margin-top: var(--sp-3);
}

.auth-form .text-input {
  grid-column: 1 / -1;
}

.auth-form .primary-button {
  grid-column: 1;
}

.auth-form .ghost-button {
  grid-column: 2;
}

.auth-hint {
  margin-top: var(--sp-2);
  font-size: .8125rem;
  color: var(--text-muted);
}

.auth-hint.is-error {
  color: var(--bad);
}

.auth-hint.is-ok {
  color: var(--ok);
}

/* Logged-in status bar */
.auth-status {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: .875rem;
  color: var(--text-muted);
}

.auth-status strong {
  color: var(--text);
  font-family: var(--font-mono);
  font-size: .9375rem;
}

/* Wrong-answer (错题本) list */
.wrongbook-list {
  margin-top: var(--sp-3);
}

.wrongbook-group {
  margin-bottom: var(--sp-4);
}

.wrongbook-group-title {
  font-family: var(--font-mono);
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--text-faint);
  margin-bottom: var(--sp-1);
  padding-bottom: var(--sp-1);
  border-bottom: 1px solid var(--rule);
}

.wrongbook-item {
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--rule);
}

.wrongbook-item:last-child {
  border-bottom: none;
}

.wrongbook-item-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-1);
}

.wrongbook-item-head .question-number {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--text);
}

.wrongbook-item-choices {
  font-size: .8125rem;
  color: var(--text-muted);
  margin-left: var(--sp-3);
}

.wrongbook-item-choices .is-correct {
  color: var(--ok);
  font-weight: 600;
}

.wrongbook-item-choices .is-chosen {
  color: var(--bad);
  font-weight: 600;
}