/* Sign in and Your account pages (Phase 1, step 2a). */

.account {
  position: relative;
  max-width: 30rem;
  margin-top: calc(-1 * var(--space-6));
}

.account .card__body { padding: var(--space-5) var(--space-4) var(--space-6); }

.account__intro { margin: 0 0 var(--space-4); overflow-wrap: anywhere; }

.account__fine {
  margin: 0 0 var(--space-4);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.account__fine a { padding-block: .75rem; } /* a bigger tap area */

.account__actions {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.account__list { margin: 0 0 var(--space-5); }
.account__list dt { font-weight: 800; }
.account__list dd { margin: 0 0 var(--space-3); overflow-wrap: anywhere; }

/* The code from the email: big, spaced-out numbers that are easy to check. */
.code-input {
  font-size: var(--fs-xl);
  font-weight: 800;
  letter-spacing: .3em;
  text-align: center;
}

.account__list dd a { padding-block: .75rem; } /* a bigger tap area */

/* Stalls you follow (step 8) */
.account__follows { margin: 0 0 var(--space-5); }
.account__follows h2 { margin: 0 0 var(--space-3); font-size: var(--fs-lg); }
.account__follows .form-status:empty { display: none; }

.follow-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }

.follow-list li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-sunk);
  border-radius: var(--radius);
}

.follow-list__cook {
  flex: none;
  width: 48px;
  height: 48px;
  object-fit: cover;
  object-position: 50% 6%;
  background: var(--sky-100);
  border: 2px solid var(--outline);
  border-radius: 50%;
}

.follow-list__text { display: grid; flex: 1 1 auto; min-width: 0; }
.follow-list__text a,
.follow-list__text strong { font-weight: 800; overflow-wrap: anywhere; }
.follow-list__text span { display: flex; align-items: center; gap: .25rem; color: var(--text-muted); font-size: var(--fs-sm); font-weight: 700; }
.follow-list__text svg { width: 1.1em; height: 1.1em; flex: none; }
.follow-list .btn { flex: none; min-height: var(--tap); padding-inline: var(--space-3); font-size: var(--fs-sm); }

/* Your orders (Phase 2, step 2). The cards' styles are in order-list.css. */
.account__orders { margin: 0 0 var(--space-5); }
.account__orders h2 { margin: 0 0 var(--space-3); font-size: var(--fs-lg); }