/* Sign-in: the header user strip and the /login panel. */

/* /account */
.account-panel { max-width: 30rem; }
.account-id {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.6rem 0 0.4rem;
}
.account-id .avatar { width: 2.2rem; height: 2.2rem; }
.account-name { font-family: var(--display); font-weight: 800; font-size: 1.1rem; }
.account-form input { max-width: 18rem; }
.account-logout { margin-top: 1.4rem; padding-top: 1rem; border-top: 2px solid var(--card-edge); }

.signin,
.logout-form button {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.8rem;
  color: var(--muted);
  background: var(--card);
  border: 2px solid var(--card-edge);
  padding: 0.3rem 0.8rem;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.signin:hover,
.logout-form button:hover { color: var(--gold); border-color: var(--gold); }

/* /login */
.auth-panel {
  max-width: 26rem;
  margin: 2rem auto;
  padding: 1.4rem;
}
.auth-note { color: var(--muted); margin: 0.4rem 0 1.2rem; }

.auth-choices { display: flex; flex-direction: column; gap: 0.7rem; }
.auth-btn {
  display: block;
  text-align: center;
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text);
  background: var(--card);
  border: 2px solid var(--panel-edge);
  padding: 0.7rem 1rem;
  transition: color 0.15s, border-color 0.15s;
}
.auth-btn:hover { color: var(--gold); border-color: var(--gold); }

.dev-login {
  margin-top: 1.4rem;
  padding-top: 1rem;
  border-top: 2px solid var(--card-edge);
  display: flex;
  align-items: end;
  gap: 0.6rem;
  color: var(--muted);
}
.dev-login label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.8rem; }
.dev-login input {
  background: var(--card);
  border: 2px solid var(--card-edge);
  color: var(--text);
  padding: 0.4rem 0.6rem;
  font: inherit;
}
.dev-login button {
  background: var(--card);
  border: 2px solid var(--card-edge);
  color: var(--text);
  padding: 0.4rem 0.9rem;
  font: inherit;
  cursor: pointer;
}
.dev-login button:hover { color: var(--gold); border-color: var(--gold); }