@scope (integration-card-ui) {
  :where(:scope) {
    /* ── Layout ── */
    --integration-card-bg:              var(--a-bg);
    --integration-card-border:          1px solid var(--a-border-subtle);
    --integration-card-radius:          var(--a-radius-md);
    --integration-card-px:              var(--a-space-4);
    --integration-card-py:              var(--a-space-4);
    --integration-card-gap:             var(--a-space-3);

    /* ── Inner rhythm ── */
    --integration-card-row-gap:         var(--a-space-3);
    --integration-card-text-gap:        var(--a-space-1);

    /* ── Logo ── */
    --integration-card-logo-size:       var(--a-space-7);
    --integration-card-logo-radius:     var(--a-radius-sm);

    /* ── Typography ── */
    --integration-card-heading-fg:      var(--a-fg-strong);
    --integration-card-heading-size:    var(--a-ui-size);
    --integration-card-heading-weight:  var(--a-weight-medium);
    --integration-card-description-fg:  var(--a-fg-muted);
    --integration-card-description-size: var(--a-ui-sm);
    --integration-card-error-fg:        var(--a-danger-text);
    --integration-card-error-size:      var(--a-ui-sm);

    /* ── States ── */
    --integration-card-disabled-opacity: 0.6;
  }

  /* ── Base — vertical stack: body row + (description) + (error) + footer ── */
  :scope {
    box-sizing: border-box;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: var(--integration-card-gap);
    padding: var(--integration-card-py) var(--integration-card-px);
    background: var(--integration-card-bg);
    border: var(--integration-card-border);
    border-radius: var(--integration-card-radius);
    width: stretch;
    min-width: 0;
  }

  /* ── Status-driven border tints ── */
  :scope[status="connected"] {
    --integration-card-border: 1px solid var(--a-success-border, var(--a-success-strong));
  }
  :scope[status="error"] {
    --integration-card-border: 1px solid var(--a-danger-border, var(--a-danger-strong));
  }

  /* ── Coming-soon + disabled → opacity reduction ── */
  :scope[status="coming-soon"],
  :scope[disabled] {
    opacity: var(--integration-card-disabled-opacity);
  }

  /* ── Body row — logo | heading | status badge ── */
  :scope > [data-integration-card-body] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--integration-card-row-gap);
  }

  /* ── Logo square ── */
  :scope > [data-integration-card-body] > [data-integration-card-logo] {
    grid-column: 1;
    inline-size: var(--integration-card-logo-size);
    block-size: var(--integration-card-logo-size);
    border-radius: var(--integration-card-logo-radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
  }
  :scope > [data-integration-card-body] > [data-integration-card-logo][hidden] {
    display: none;
  }
  :scope [data-integration-card-logo] > img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
    display: block;
  }
  :scope [data-integration-card-logo] > icon-ui {
    --a-icon-size: calc(var(--integration-card-logo-size) - var(--a-space-1));
    color: var(--a-fg-muted);
  }

  /* ── Heading (provider name) ── */
  :scope > [data-integration-card-body] > [data-integration-card-heading] {
    grid-column: 2;
    color: var(--integration-card-heading-fg);
    font-size: var(--integration-card-heading-size);
    font-weight: var(--integration-card-heading-weight);
    line-height: 1.3;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ── Status badge (sits in body row, right-aligned) ── */
  :scope > [data-integration-card-body] > [data-integration-card-status] {
    grid-column: 3;
    justify-self: end;
  }
  :scope > [data-integration-card-body] > [data-integration-card-status][hidden] {
    display: none;
  }

  /* ── Description ── */
  :scope > [data-integration-card-description] {
    margin: 0;
    color: var(--integration-card-description-fg);
    font-size: var(--integration-card-description-size);
    line-height: 1.4;
  }
  :scope > [data-integration-card-description][hidden] {
    display: none;
  }

  /* ── Author-provided description (default slot) — same typography
     by selector rather than slot to support bare <p>, <text-ui>, <small>. */
  :scope > p:not([data-integration-card-description]):not([data-integration-card-error]),
  :scope > small:not([data-integration-card-error]) {
    margin: 0;
    color: var(--integration-card-description-fg);
    font-size: var(--integration-card-description-size);
    line-height: 1.4;
  }

  /* ── Error message ── */
  :scope > [data-integration-card-error] {
    margin: 0;
    color: var(--integration-card-error-fg);
    font-size: var(--integration-card-error-size);
    line-height: 1.4;
  }
  :scope > [data-integration-card-error][hidden] {
    display: none;
  }

  /* ── Footer — action button + optional [slot="actions"] overflow ── */
  :scope > [data-integration-card-footer] {
    display: flex;
    align-items: center;
    gap: var(--integration-card-row-gap);
    margin: 0;
    padding: 0;
  }

  /* Action button is first child of footer; menu / overflow goes to the right. */
  :scope > [data-integration-card-footer] > [data-integration-card-action] {
    flex: 0 0 auto;
  }
  :scope > [data-integration-card-footer] > [slot="actions"] {
    margin-inline-start: auto;
  }

  /* ── Disabled state — button-ui already dims; ensure card chrome too. */
  :scope[disabled] {
    pointer-events: none;
  }
}
