/* /account (accounts#show) — page-local rules.
 * Generic title/subtitle/description/empty/header/split moved to
 * objects/_text.css and objects/_panel.css (.panel-title etc.).
 * What's left here is genuinely page-specific. */

.account-show-container {
  max-width: 42rem;
  margin-inline: auto;
  color: var(--text-primary);

  & > h1 { margin-bottom: var(--spacing-32); }
  & > .panel,
  & > .notice { margin-bottom: var(--spacing-24); }
}

.account-show-api-key-revealed       { margin-bottom: var(--spacing-16); }
.account-show-api-key-revealed-title { margin-bottom: var(--spacing-8); }

/* Account Details dl */
.account-show-details-list > * + * { margin-top: var(--spacing-12); }

.account-show-details-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-16);

  &.account-show-details-row--plain  { align-items: initial; }
  &.account-show-details-row--simple { align-items: initial; gap: var(--spacing-0); }
}

.account-show-details-label {
  color: var(--text-tertiary);
  flex-shrink: 0;
}

.account-show-details-value--truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-show-details-edit {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
}

.account-show-details-name-input {
  text-align: right;
  background-color: transparent;
  border: 0;
  border-bottom: var(--stroke-weight-1) dashed var(--border-default);
  padding: var(--spacing-2) var(--spacing-4);
  width: 10rem;
  transition: border-color 150ms;

  &:focus {
    border-bottom-color: var(--border-default);
    border-bottom-style: solid;
    outline: none;
  }
}

.account-show-details-name-status {
  width: 1rem;
  height: 1rem;
  display: flex;
  align-items: center;

  & svg { width: 0.875rem; height: 0.875rem; color: var(--text-disabled); }
}

/* Status pills (small rounded tags inside details/security) */
.account-show-status-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8);
}
.account-show-status-pill--promo,
.account-show-status-pill--paid,
.account-show-status-pill--free,
.account-show-status-pill--mfa {
  font-size: var(--font-size-12);
  line-height: 1rem;
  padding: var(--spacing-4) var(--spacing-8);
  border-radius: var(--corner-radius-sm);
  font-weight: var(--font-weight-500);
}
.account-show-status-pill--promo {
  background-color: var(--background-surface-2);
  color: var(--text-primary);
}
.account-show-status-pill--paid,
.account-show-status-pill--mfa {
  background-color: var(--background-surface-2);
  color: var(--text-primary);
}
.account-show-status-pill--free {
  background-color: var(--background-surface-2);
  color: var(--text-secondary);
}

/* Genome uploads list */
.account-show-uploads-list > * + * { margin-top: var(--spacing-12); }

.account-show-upload-row {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--spacing-8);
  padding: var(--spacing-12);
  border-radius: var(--corner-radius-sm);
  border: var(--stroke-weight-1) solid var(--border-subtle);

  & .account-show-upload-info { min-width: 0; }
  & .account-show-upload-name { font-weight: var(--font-weight-500); }
  & .account-show-upload-meta { font-size: var(--font-size-12); line-height: 1rem; color: var(--text-tertiary); }

  & .account-show-upload-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-12);
    flex-shrink: 0;
  }

  & .account-show-upload-file-stored {
    font-size: var(--font-size-12);
    line-height: 1rem;
    padding: var(--spacing-2) var(--spacing-8);
    border-radius: var(--corner-radius-sm);
    background-color: var(--background-surface-2);
    color: var(--text-primary);
  }

  & .account-show-upload-file-delete {
    font-size: var(--font-size-12);
    line-height: 1rem;
    color: var(--text-primary);
  }

  & .account-show-upload-delete {
    color: var(--text-risk-factor);
    & svg { width: 1rem; height: 1rem; }
  }
}

@media (min-width: 40rem) {
  .account-show-upload-row {
    flex-direction: row;
    align-items: center;
  }
}

/* "Set up" / "Upgrade" CTA buttons — bespoke pink-on-white. */
.account-show-setup-button,
.account-show-upgrade-button {
  background-color: var(--background-surface-2);
  color: var(--color-white-solid);
  padding: var(--spacing-8) var(--spacing-16);
  border-radius: var(--corner-radius-sm);
  transition: background-color 150ms;
  flex-shrink: 0;
  margin-left: var(--spacing-16);

  &:hover { background-color: var(--background-surface-2); }
}
.account-show-upgrade-button {
  font-weight: var(--font-weight-600);
  padding-inline: var(--spacing-24);
}

/* Upgrade CTA recolors panel-title/subtitle to azure on info-accent panel. */
.account-show-upgrade-card .panel-title,
.account-show-upgrade-card .panel-subtitle { color: var(--text-primary); }

/* Connections list */
.account-show-connections-list > * + * { margin-top: var(--spacing-8); }

.account-show-connection-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.account-show-connection-status,
.account-show-connection-status--pending {
  font-size: var(--font-size-12);
  line-height: 1rem;
}
.account-show-connection-status          { color: var(--text-tertiary); }
.account-show-connection-status--pending { color: var(--text-primary); }

/* Genome sharing */
.account-show-sharing-intro { color: var(--color-grey-500); margin-bottom: var(--spacing-8); }

.account-show-sharing-list { margin-bottom: var(--spacing-16); }
.account-show-sharing-list > * + * { margin-top: var(--spacing-4); }
.account-show-sharing-list--last > * + * { margin-top: var(--spacing-4); }

/* API access */
.account-show-api-locked { color: var(--color-grey-500); }

.account-show-api-key-code,
.account-show-api-mcp-snippet {
  display: block;
  background-color: var(--background-surface-2);
  padding: var(--spacing-12);
  border-radius: var(--corner-radius-sm);
  font-family: var(--font-family-mono);
}
.account-show-api-key-code   { word-break: break-all; user-select: all; }
.account-show-api-mcp-snippet { font-size: var(--font-size-12); line-height: 1rem; overflow-x: auto; }

.account-show-api-mcp-block {
  margin-top: var(--spacing-16);
  color: var(--text-secondary);

  & > * + * { margin-top: var(--spacing-12); }
  & .account-show-api-mcp-label { font-weight: var(--font-weight-500); color: var(--text-primary); }
}

.account-show-api-active-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  margin-bottom: var(--spacing-16);

  & code {
    background-color: var(--background-surface-2);
    padding: var(--spacing-4) var(--spacing-8);
    border-radius: var(--corner-radius-sm);
    font-family: var(--font-family-mono);
  }
}

.account-show-api-actions {
  display: flex;
  gap: var(--spacing-12);
}

/* Security */
.account-show-security-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  flex-shrink: 0;
  margin-left: var(--spacing-16);
}

/* Your Data rows */
.account-show-data-row,
.account-show-data-row--last {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--spacing-12);
}
.account-show-data-row {
  border-bottom: var(--stroke-weight-1) solid var(--color-grey-100);
}

.account-show-data-download {
  background-color: var(--background-surface-2);
  padding: var(--spacing-8) var(--spacing-16);
  border-radius: var(--corner-radius-sm);
  transition: background-color 150ms;
  flex-shrink: 0;
  margin-left: var(--spacing-16);

  &:hover { background-color: var(--background-hover); }
}

.account-show-data-delete {
  color: var(--text-risk-factor);
  font-weight: var(--font-weight-500);
  flex-shrink: 0;
  margin-left: var(--spacing-16);
}

/* Logout */
.account-show-logout-wrap {
  text-align: center;
  margin-top: var(--spacing-32);
}
.account-show-logout-button {
  color: var(--text-tertiary);
  &:hover { color: var(--text-primary); }
}