/* Account fields, choice lists, and actions. */
.account-form { display: flex; flex-direction: column; gap: var(--space-6); }

.account-fieldset {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;

  + .account-fieldset {
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-gray-4);
  }

  > legend {
    width: 100%;
    padding: 0 0 var(--space-2);
    color: var(--color-black);
    font-size: var(--font-size-5);
    font-weight: 700;
    letter-spacing: -0.01em;

    &.visually-hidden { padding: 0; border-bottom: 0; }
    &.account-subheading { padding: 0; border-bottom: 0; font-size: var(--font-size-3); }
  }

  &.has-error > legend { color: var(--color-red); }
}

.account-next-steps,
.account-fineprint {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 68ch;
  color: var(--color-text-secondary);
  font-size: var(--font-size-3);
  line-height: var(--line-height-body);
  text-wrap: pretty;

  p { margin: 0; }
}

.account-next-steps { margin-bottom: var(--space-6); }

.account-fineprint {
  color: var(--color-gray-20);

  a {
    color: var(--color-secondary-hover);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  a:hover { color: var(--color-black); }
}

.field-group,
.field-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-2) var(--space-4);
}

.field {
  display: flex;
  flex-direction: column;
  grid-column: span 12;
  gap: var(--space-2);
  min-width: 0;

  &.span-1 { grid-column: span 1; }
  &.span-2 { grid-column: span 2; }
  &.span-3 { grid-column: span 3; }
  &.span-4 { grid-column: span 4; }
  &.span-5 { grid-column: span 5; }
  &.span-6 { grid-column: span 6; }
  &.span-7 { grid-column: span 7; }
  &.span-8 { grid-column: span 8; }
  &.span-9 { grid-column: span 9; }
  &.span-10 { grid-column: span 10; }
  &.span-11 { grid-column: span 11; }
  &.span-12 { grid-column: span 12; }

  > label {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    color: var(--color-black);
    font-size: var(--font-size-3);
    font-weight: 700;
    line-height: var(--line-height-body-tight);
    transition: color var(--transition-fast);
  }

  &:focus-within > label { color: var(--color-secondary-hover); }

  input,
  select {
    width: 100%;
    height: var(--control-height);
    padding-inline: var(--space-3);
    border: 1px solid var(--color-gray-8);
    border-radius: var(--radius-2);
    background-color: var(--color-white);
    color: var(--color-black);
    font-family: var(--font-stack);
    font-size: var(--font-size-4);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);

    &:hover { border-color: var(--color-gray-16); }
    &:focus-visible {
      outline: 0;
      border-color: var(--color-primary);
      box-shadow: 0 0 0 3px var(--color-primary-tint);
    }
    &:disabled {
      background-color: var(--color-gray-2);
      color: var(--color-gray-20);
      cursor: not-allowed;
    }
  }

  select {
    appearance: none;
    padding-right: var(--space-7);
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23191817' stroke-width='1.5'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    background-size: 12px 8px;
  }

  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--color-white) inset;
    -webkit-text-fill-color: var(--color-black);
  }

  &.has-error {
    input,
    select { border-color: var(--color-red); }
    input:focus-visible,
    select:focus-visible { box-shadow: 0 0 0 3px #fbe3e3; }
  }
}

.field-optional {
  color: var(--color-gray-20);
  font-size: var(--font-size-2);
  font-weight: 400;
}

.field-error {
  color: #a30000;
  font-size: var(--font-size-2);
  line-height: var(--line-height-body);
  animation: account-error-arrive var(--motion-duration-fast) cubic-bezier(.25, 1, .5, 1);
}

.field-check {
  display: flex;
  grid-column: span 12;
  align-items: center;
  gap: var(--space-2);

  input {
    width: 18px;
    height: 18px;
    flex: none;
    accent-color: var(--color-primary);
    cursor: pointer;
    &:focus-visible {
      outline: 2px solid var(--color-primary);
      outline-offset: 2px;
    }
  }

  label {
    color: var(--color-black);
    font-size: var(--font-size-3);
    cursor: pointer;
  }
}

.account-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-7) var(--space-8);
  align-items: start;
}

.account-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
}

.account-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--space-4) var(--space-7);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-gray-4);
}

.account-submit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.choice-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.choice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-inline: calc(var(--space-2) * -1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-2);
  transition: background-color var(--transition-fast);

  &.is-indented { padding-left: var(--space-5); }
  &:hover { background-color: var(--color-gray-1); }
  &:has(input:checked) { background-color: var(--color-primary-tint); }
  &:has(input:checked) label { font-weight: 700; }

  input {
    width: 18px;
    height: 18px;
    flex: none;
    margin-top: 2px;
    accent-color: var(--color-primary);
    cursor: pointer;
    &:focus-visible {
      outline: 2px solid var(--color-primary);
      outline-offset: 2px;
    }
  }
  label { color: var(--color-black);
  font-size: var(--font-size-4);
  line-height: var(--line-height-body-tight);
  cursor: pointer;
  }
}

.choice-note {
  margin-bottom: var(--space-2);
  color: var(--color-gray-20);
  font-size: var(--font-size-2);
  line-height: var(--line-height-body-tight);
}

.account-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);

  &.is-centered { justify-content: center; }
}

.account-recovery-link {
  align-self: flex-start;
  margin-top: calc(var(--space-4) * -1);
  color: var(--color-secondary-hover);
  font-size: var(--font-size-3);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  &:hover { color: var(--color-black); }
}

.account-page .cta.is-submit,
.account-button {
  min-height: 40px;
  height: 40px;
  border-radius: var(--radius-round);
  font-family: var(--font-stack);
  font-size: var(--font-size-3);
  line-height: 1;
}

.account-page .cta.is-submit { padding: 0 var(--space-4); }

/* Similar to .cta, but at 40px instead of 56px. */
.account-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0 var(--space-5);
  border: 1px solid var(--color-gray-8);
  background-color: var(--color-white);
  color: var(--color-black);
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);

  &:hover { border-color: var(--color-primary); background-color: var(--color-primary); }
  &:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
}

/* .cta reserves extra right padding for a trailing icon; submit inputs never
   have one, so symmetric padding keeps the label centered. */
.cta.is-submit {
  padding-inline: 30px;
  transition: background-color var(--transition-fast), transform var(--motion-duration-fast) cubic-bezier(.25, 1, .5, 1);
  &:hover { transform: none; box-shadow: none; }
  &:active { transform: translateY(1px); box-shadow: none; }
  &:focus-visible { outline: 2px solid var(--color-black); outline-offset: 3px; }
  &:disabled { background-color: var(--color-gray-8); color: var(--color-gray-20); cursor: not-allowed; }
}

.account-aside { color: var(--color-gray-20); font-size: var(--font-size-3); }

@media (max-width: 52rem) {
  .field[class*="span-"] { grid-column: span 6; }
  .field.span-8, .field.span-9, .field.span-10, .field.span-11 { grid-column: span 12; }
  .account-footer { grid-template-columns: minmax(0, 1fr); align-items: start; }
}
@media (max-width: 48rem) { .account-columns { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); } }
@media (max-width: 34rem) { .field[class*="span-"] { grid-column: span 12; } }