/*
 * /account/api (accounts/api_keys): the keys' table with its row of small
 * buttons, the key shown once and the warning under it, and the form that
 * makes one.
 */
@layer pages {
  .api-keys-page {
    --gap: var(--space-lg);
  }

  .api-keys-page__lede {
    margin: 0;
    max-inline-size: 42rem;
    color: var(--color-ink-muted);
  }

  .api-keys-page__note {
    margin: 0;
    padding: var(--space-xs) var(--space-sm);
    color: var(--color-ink-muted);
    font-size: var(--text-ui-sm);
  }

  .api-keys-page__key {
    font-family: var(--font-data);
    font-variant-numeric: tabular-nums;
  }

  .api-keys-page__inactive {
    display: block;
    color: var(--color-ink-muted);
    font-size: var(--text-meta-xs);
  }

  .api-keys-page__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2xs);
  }

  .api-keys-page__form {
    display: grid;
    gap: var(--space-sm);
    max-inline-size: 28rem;
    margin-block-start: var(--space-sm);
  }

  .api-keys-page__warning {
    margin: var(--space-sm) 0 0;
    color: var(--color-ink);
    font-weight: var(--weight-semibold);
  }
}

/*
 * The API docs (pages/api_docs): page cards and prose, with the "Get your
 * key" call to action under the lede, and a little air between the
 * reference's operations.
 */
@layer pages {
  .api-docs__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    margin-block: var(--space-md);
  }

  .api-docs__cta-note {
    color: var(--color-ink-muted);
    font-size: var(--text-ui-sm);
  }

  .api-docs__operation {
    margin-block-end: var(--space-lg);
  }

  .api-docs__check {
    padding-inline-start: var(--space-sm);
    border-inline-start: 3px solid var(--color-rule-control);
    color: var(--color-ink-muted);
  }
}