/* integrations: connected apps with their real icons (local colour files in icons/); one connects in the loop */
.ui-apps { width: 380px; overflow: hidden; }
.ui-apps__list { padding: 4px 0; }
.ui-app { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 14px 0 16px; }
.ui-app + .ui-app { box-shadow: inset 0 1px 0 var(--u-line); }
.ui-app__text { display: grid; flex: 1; min-width: 0; }
.ui-app__name { font-size: 13px; font-weight: 500; line-height: 20px; }
.ui-app__sub { font-size: 13px; line-height: 16px; color: var(--u-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-app__state { display: grid; justify-items: end; flex: none; }
.ui-app__state > * { grid-area: 1 / 1; transition: opacity 200ms var(--u-ease), transform 260ms var(--u-ease); }
.ui-app .ui-app__on { opacity: 0; transform: scale(0.94); }
/* Connected is quiet ink on every row (a row of green dots reads as tinted chips everywhere) */
.ui-app .ui-app__on { color: var(--u-ink); }
.ui-app .ui-app__on::before { opacity: 0.7; }
.ui-app.is-on .ui-app__on { opacity: 1; transform: none; }
.ui-app.is-on .ui-app__connect { opacity: 0; pointer-events: none; }
.ui-app__spin { display: none; width: 10px; height: 10px; }
.ui-app.is-busy .ui-app__spin { display: inline-block; }
.ui-apps .ui-pointer { transition: transform 720ms cubic-bezier(0.45, 0, 0.2, 1), opacity 300ms ease; }
/* --apps-w widens the list for a wide panel (a split card) */
.ui-apps { width: var(--apps-w, 380px); }
/* phone: the list takes the panel's width (cards.css); a long line wraps instead of being cut */
@media (max-width: 639px) {
  .ui-app { height: auto; min-height: 56px; padding: 10px 12px 10px 14px; }
  .ui-app__sub { white-space: normal; }
}