@layer components {
  /* What an app asking for access is, where it returns, and what it reads. */
  .oauth-consent {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);

    div {
      display: grid;
      gap: 0.125rem;
    }

    dt {
      color: var(--muted-foreground);
    }

    dd {
      margin: 0;
      overflow-wrap: anywhere;
    }
  }

  /* Read, or read and write: what the person lets the app do. */
  .oauth-access {
    display: grid;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    border: 0;

    legend {
      margin-block-end: 0.25rem;
      padding: 0;
      color: var(--muted-foreground);
      font-size: var(--text-sm);
      line-height: var(--text-sm--line-height);
    }

    .checkbox {
      align-items: start;
      padding-block: 0.375rem;
    }
  }
}