/* Account page (#294): who is signed in, and changing your password. Like
   Defaults, its button sits beneath its own form. */
.account-load-error[hidden] {
  display: none;
}

.account-page-close { display: none; }

@media (max-width: 1024px) {
  .account-page-close {
    display: inline-flex;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
  }
  .account-page-close svg {
    display: block;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
  }
}

.account-load-error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.account-column {
  display: grid;
  align-content: start;
  gap: var(--space-4);
}

/* The column's gap spaces its cards, matching the grid's gap between columns. */
.account-column > .section-block {
  margin-bottom: 0;
}

.account-name {
  margin: 0;
}

.account-email {
  margin: var(--space-1) 0 0;
  color: var(--color-text-muted);
}

.account-password-form {
  max-width: 420px;
}

.account-password-note {
  margin: 0 0 var(--space-4);
  color: var(--color-text-muted);
}

.account-password-form .text-input {
  width: 100%;
}

/* Present for password managers only, never seen or reached. */
.account-username {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  opacity: 0;
  pointer-events: none;
}

.account-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.account-submit-hint,
.account-message {
  flex: 1 1 100%;
  margin: 0;
  color: var(--color-text-muted);
}

.account-submit-hint[hidden],
.account-message:empty {
  display: none;
}

.account-message.is-error {
  color: var(--color-danger);
  font-weight: 600;
}

/* Keep the unavailable action legible without making it look active. */
.account-actions .btn:disabled {
  opacity: 1;
  background: var(--color-action-subtle);
  border-color: var(--color-line);
  color: var(--color-text-muted);
}

/* Directly beneath the Change password card, exactly as wide: the row uses
   the cards' own two columns (.settings-grid) and the button fills the
   second. When the cards stack on a phone, it fills the one column. */
.account-sign-out {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-2);
}

.account-sign-out .btn {
  grid-column: 2;
  justify-content: center;
  width: 100%;
  max-width: 420px;
}

/* Once the cards stack, both fill the page width, as Sign out does. */
@media (max-width: 767px) {
  .account-column {
    gap: var(--space-3);
  }
  .account-password-form {
    max-width: none;
  }
  .account-sign-out {
    grid-template-columns: 1fr;
  }
  .account-sign-out .btn {
    grid-column: 1;
    max-width: none;
  }
  .account-actions .btn {
    flex: 1 1 100%;
  }
}

/* Someone the plan was shared with (#290 B3b) sees who is signed in and can
   sign out; sharing and changing a password are the owner's. */
body.shared-access .account-sharing,
body.shared-access .account-password-form {
  display: none;
}