/* integrations: this part's own styles. Family tokens and the --mam- extensions from styles.css only; no colour is written here (UI-TOK-03). */

.int-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.int-kind, .int-plugin { padding: 16px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.int-head { display: flex; align-items: center; gap: 8px; }
.int-head h3 { margin: 0; font-size: 15px; }
.int-icon { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-sm); background: var(--mam-tint); color: var(--ot-accent); flex: none; }
.int-what, .int-plugin > p { margin: 0; }
.int-none { margin: 0; color: var(--ot-muted); font-style: italic; }
.int-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }
.int-rows { display: flex; flex-direction: column; border: 1px solid var(--ot-line); border-radius: var(--radius-sm); overflow: hidden; }

.int-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-top: 1px solid var(--ot-line); cursor: pointer; min-height: 44px; }
.int-row:first-child { border-top: 0; }
.int-row:hover { background: var(--ot-surface-2); }
.int-row.off .int-row-name b { color: var(--ot-muted); }
.int-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.int-row-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.int-row-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.int-row-sub, .int-row-addr { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.int-row-status { font-size: 12px; overflow-wrap: anywhere; }
.int-row-status.warn { color: var(--ot-warn); }
html[data-ot-theme="light"] .int-row-status.warn { color: var(--ot-text); }
.int-row-acts { display: flex; align-items: center; gap: 4px; flex: none; }
.int-autos { overflow: hidden; }

.int-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.int-note { font-size: 12px; margin: 0; }
.int-error { font-size: 12px; max-width: 360px; overflow-wrap: anywhere; }
.int-setup .chip-input, .int-lr .chip-input { width: 100%; }
.int-setup .notice, .int-lr .notice { margin-bottom: 0; }
.int-lr .seg { flex-wrap: wrap; border-radius: var(--radius-md); }
.int-deliveries table.list td { vertical-align: top; }

@media (max-width: 820px) {
  .int-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .int-row { flex-wrap: wrap; }
  .int-row-acts { width: 100%; justify-content: space-between; }
  .int-acts .btn { white-space: normal; text-align: left; }
}
@media (pointer: coarse) { .int-row-acts .btn { min-height: 36px; } }