/* The Connect modal (#3479, design epic #3432; Nov-4 Figma 1:11782) on the
 * ds/overlays 520 modal. integrations-connect.ts draws it; the Configure modal
 * (#3480, pages/integrations-configure.css) shares its frame. Tokens only.
 * Deviations: the drawn #9ca3af labels and consent text fail AA on white,
 * so they use --fg-muted (the DS eyebrow's color); the authentication line,
 * the provider error and the reason Connect is off are not in Figma. */

:is(#int-connect-modal, #int-configure-modal) .ui-modal-title { letter-spacing: -0.4px; }
:is(#int-connect-modal, #int-configure-modal) .ui-modal-step { letter-spacing: 0.2px; }
:is(#int-connect-modal, #int-configure-modal) .ui-modal-body { gap: 18px; background: var(--surface); }
:is(#int-connect-modal, #int-configure-modal) .ui-modal-foot { background: var(--surface-raised); border-top-color: var(--border); }
:is(#int-connect-modal, #int-configure-modal) .ui-modal-foot > .btn-secondary { flex: none; width: 145px; }
:is(#int-connect-modal, #int-configure-modal) .ui-modal-foot svg { width: 16px; height: 16px; }

.int-cm-section { display: grid; gap: 6px; }
.int-cm-label { font-weight: 600; }

/* Selected tool card (1:11793) */
.int-cm-tool {
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3);
  background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.int-cm-tool-text { display: grid; gap: 2px; flex: 1 1 auto; min-width: 0; }
.int-cm-tool-name { margin: 0; font: 600 13px/normal var(--font-mono); color: var(--fg-strong); }
.int-cm-tool-cat { margin: 0; font: 400 11px/normal var(--font-mono); color: var(--fg-muted); }
.int-cm-selected {
  flex: none; padding: 4px 8px; border: 1px solid var(--success-border); border-radius: var(--radius-sm);
  background: var(--success-bg); color: var(--success-fg);
  font: 700 9px/normal var(--font-mono); text-transform: uppercase;
}

/* Authentication: OAuth, so a line instead of the parked token field (proposed, not in Figma) */
.int-cm-auth { margin: 0; font: 400 11px/19px var(--font-mono); color: var(--fg-muted); }

/* The provider's error and why Connect is off (proposed, not in Figma) */
.int-cm-alert[hidden] { display: none; }
.int-cm-alert {
  margin: 0; padding: 10px 14px; border-radius: var(--radius);
  background: var(--danger-bg); color: var(--danger-fg); font: var(--type-body-sm);
}
.int-cm-blocked { margin: 0; font: var(--type-body-sm); color: var(--fg-strong); }

/* Consent (1:11838): what the provider's own page says MergeSafe does with access */
.int-cm-consent { margin: 0; font: 400 11px/1.6 var(--font-sans); color: var(--fg-muted); }

/* Below 640: a full-screen sheet (#3442); the head and foot stay, the body scrolls. */
@media (max-width: 640px) {
  .ui-overlay:has(> :is(#int-connect-modal, #int-configure-modal)) { padding: 0; }
  :is(#int-connect-modal, #int-configure-modal) { width: 100%; height: 100%; max-height: none; border: 0; border-radius: 0; }
  :is(#int-connect-modal, #int-configure-modal) .ui-modal-foot > .btn-secondary { width: auto; }
}