/* integrations domain styles. Owned by the integrations domain; loaded by index.html.
 * Build on tokens.css and components.css; prefix selectors with .integrations- so
 * nothing here can restyle another domain's screens. */

/* Connector cards: equal-height rows, so a card with a long error does not
   leave its neighbours floating. */
.integrations-grid { align-items: stretch; }
.integrations-card { min-width: 0; }
.integrations-card .widget-head { flex-wrap: wrap; gap: var(--sp-xs); }

/* The last run's sentence or error: wrap rather than truncate — it is the
   one line on the card an operator reads in full. */
.integrations-detail { overflow-wrap: anywhere; line-height: 1.45; }

.integrations-error { display: inline-block; max-width: 360px; }
.integrations-url { overflow-wrap: anywhere; }

.integrations-secret {
  font-family: var(--font-mono, ui-monospace, monospace);
  min-height: 96px;
  resize: vertical;
}

.integrations-fields { align-items: start; }

.integrations-counters {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: var(--sp-sm);
}

@media (max-width: 1439px) {
  .integrations-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .integrations-grid,
  .integrations-fields { grid-template-columns: minmax(0, 1fr); }
}