/* Account pages: sign-up, login, password reset, my page. */

.auth-section {
  padding-top: var(--sp5);
}

.auth-card {
  max-width: 560px;
}

.auth-form {
  display: grid;
  gap: var(--sp4);
}

.auth-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp2) var(--sp4);
  margin: var(--sp4) 0 0;
  padding: 0;
  list-style: none;
}

.auth-submit {
  justify-self: start;
}

.auth-notices {
  display: grid;
  gap: var(--sp3);
  margin-bottom: var(--sp4);
}

.auth-notices p,
.auth-card .notice p {
  margin: 0;
}

.my-grid {
  display: grid;
  gap: var(--sp4);
}

@media (min-width: 1024px) {
  .my-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }
}

.my-card h2 {
  margin-top: 0;
  font-size: var(--fs-lg);
}

.my-facts {
  margin: 0 0 var(--sp3);
}

.my-facts div {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--sp3);
  padding: var(--sp2) 0;
  border-bottom: 1px solid var(--border);
}

.my-facts dt {
  min-width: 120px;
  color: var(--text-faint);
}

.my-facts dd {
  margin: 0;
}

.my-card .auth-form {
  margin-top: var(--sp3);
}

.my-danger {
  border-color: var(--crit-line);
}

.my-lots {
  grid-column: 1 / -1;
}

.my-lotsNow {
  margin: 0 0 var(--sp2);
  font-size: var(--fs-lg);
  font-weight: 700;
}

.my-lotsActions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp2) var(--sp3);
  margin: var(--sp3) 0 0;
}

.my-lotsPending {
  display: grid;
  gap: var(--sp2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.plan-grid {
  display: grid;
  gap: var(--sp4);
  margin: var(--sp4) 0;
}

@media (min-width: 600px) {
  .plan-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .plan-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.plan-price {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 700;
}

.plan-card h3 {
  margin-top: 0;
}

.plan-card ul {
  margin: var(--sp3) 0;
  padding-left: 1.2em;
}

.radio-row {
  display: flex;
  align-items: center;
  gap: var(--sp3);
  font-weight: 400;
}

.radio-row input {
  flex: none;
  width: 24px;
  height: 24px;
  margin: 0;
}

.ops-table td form {
  margin: 0;
}