@layer pages {

/* Accounts pages — login, signup, forgot/reset password, profile, settings.
   Identity layer, no card chrome: plain sectioned layout with hairline
   dividers between sections, per the cards-restricted-to-listings rule. */

body {
  background-color: var(--color-paper);
}

.auth-page {
  max-width: 400px;
  margin: 0 auto;
  padding-top: var(--space-6);
}

.auth-page__aside {
  margin-top: calc(var(--space-2) * -1);
  font-size: var(--font-size-sm);
  text-align: right;
}

.auth-page > .flash {
  margin: 0 0 var(--space-5);
}

/* Signup: which terms apply, just above the submit button. */
.signup-terms {
  margin-bottom: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.signup-terms p {
  margin: 0 0 var(--space-2);
}

/* Account settings: one form per section, form-width. */
.settings-page {
  max-width: 560px;
  margin: 0 auto;
}

/* Profile: wide enough for two favorite cards side by side. */
.profile-page {
  max-width: 900px;
  margin: 0 auto;
}

/* Overview: account details beside the three counts; stacked on phones. */
.profile-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--space-5);
  align-items: start;
  margin-bottom: var(--space-6);
}

.profile-overview__details {
  display: grid;
  gap: var(--space-3);
  justify-items: start;
}

.profile-overview__account {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--space-1) var(--space-4);
  margin: 0;
}

.profile-overview__account dt {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.profile-overview__account dd {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--color-ink);
  font-weight: var(--font-weight-semibold);
}

/* The three counts stay in one row, even on phones. */
.profile-overview .stat-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin-bottom: 0;
}

@media (max-width: 640px) {
  .profile-overview {
    grid-template-columns: minmax(0, 1fr);
  }

  .profile-overview .stat {
    padding: var(--space-3);
    font-size: var(--font-size-sm);
  }
}

.profile-search__criteria,
.profile-search__places {
  margin: 0 0 var(--space-2);
  padding: 0;
  list-style: none;
}

.profile-search__place-address {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.profile-page__group {
  margin-bottom: var(--space-4);
}

.profile-page__group-title {
  margin-bottom: var(--space-2);
  color: var(--color-ink);
  font-size: var(--font-size-base);
}

/* Saved-search list: plain rows with hairline dividers, no card chrome
   (per the cards-restricted-to-listings rule) -- one row per saved search,
   name/criteria left, actions right. */
.saved-search-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.saved-search-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-line);
}

.saved-search-item:first-child {
  padding-top: 0;
}

.saved-search-item:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.saved-search-item__info {
  min-width: 0;
}

.saved-search-item__name {
  display: block;
  color: var(--color-ink);
}

.saved-search-item__criteria {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-2);
}

.saved-search-item__criteria,
.saved-search-item__alert {
  margin: var(--space-1) 0 0;
  padding: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.saved-search-item__criteria li:not(:last-child)::after {
  content: ",";
}

.saved-search-item__actions {
  flex: 0 0 auto;
}

.saved-search-item__actions form {
  margin: 0;
}

@media (max-width: 480px) {
  .saved-search-item {
    flex-direction: column;
    align-items: stretch;
  }

  .saved-search-item__actions {
    margin-top: var(--space-2);
  }
}

}