/**
 * Wine Cellar - Settings > Account: download your data and delete your account (alpha privacy plan B, sections 5.5 and 6).
 * Tokens only; presentation lives here, never in inline styles.
 */

.account-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-md, 0.75rem);
}

.account-block,
.account-deletion {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm, 0.5rem);
}

.account-block p,
.account-deletion p,
.account-status {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text, #eee);
}

.account-status {
  min-height: 1.25rem;
  color: var(--text-muted, #bbb);
}

.account-deletion-heading {
  margin: 0;
  font-size: 1rem;
  color: var(--text, #eee);
}

.account-deletion-heading:focus {
  outline: 2px solid var(--focus-ring, currentColor);
  outline-offset: 2px;
}

.account-deletion-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm, 0.5rem);
}

.account-deletion-plan,
.account-deletion-blockers {
  margin: 0;
  padding-left: 1.25rem;
  font-size: 0.85rem;
  color: var(--text, #eee);
}

.account-deletion-blocker {
  margin-bottom: var(--space-md, 0.75rem);
}

.account-deletion-warning {
  font-weight: 600;
}

.account-deletion-error {
  color: var(--color-error-text, var(--text, #eee));
}

.account-deletion-help,
.account-deletion-notice {
  color: var(--text-muted, #bbb);
}

.account-deletion [aria-disabled='true'] {
  opacity: 0.6;
  cursor: not-allowed;
}

.account-deletion input,
.account-deletion select {
  min-height: 2.75rem;
  max-width: 100%;
}

/* The account-only view of a held account: the app shell is hidden, this view is all there is. */
body.body--restricted > *:not(#restricted-account):not(#toast-container):not(#auth-screen):not(script) {
  display: none;
}

.restricted-account {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md, 0.75rem);
  max-width: 40rem;
  margin: 0 auto;
  padding: var(--space-lg, 1.5rem) 16px;
  color: var(--text, #eee);
}

.restricted-account h1:focus {
  outline: 2px solid var(--focus-ring, currentColor);
  outline-offset: 2px;
}