/* Connectors (13.13, connectors.js): the page in three parts (Bring in footage, Send updates, Assistants and API),
   the recordings dialogs and the webhook rows. Card-free like the rest (flat.css): a part is a heading and a line,
   lists are rows split by hairlines, a warning is a word in its colour. Only tokens of app.css, so Light and Dark both
   follow. Rows wrap at phone width, with the buttons under the words. */
.cn-group { margin: 38px 0 0; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-3); }
.cn-group:first-child, #cnConsent + .cn-group { margin-top: 6px; }
.cn-lead { margin: 6px 0 4px; line-height: 1.55; max-width: 720px; }
.cn-more { margin: 14px 0 0; line-height: 1.55; }
.cn-p { margin: 0 0 12px; line-height: 1.55; }

.cn-line { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 12px 0 0; }
.cn-line select.input { width: auto; max-width: 100%; }
.cn-switch { cursor: pointer; line-height: 1.45; }
.cn-switch input:disabled + span { cursor: not-allowed; opacity: .5; }

.cn-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 11px 0; border-top: 1px solid var(--rule); }
.cn-row:first-child { border-top: 0; }
.cn-row .grow { flex: 1 1 220px; min-width: 0; line-height: 1.45; }
.cn-row .grow > b, .cn-row .grow > span { display: block; }
.cn-row small { display: block; color: var(--text-3); overflow-wrap: anywhere; }
.cn-acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cn-acts select.input { width: auto; height: 30px; }

.cn-imports { margin-top: 16px; }
.cn-imports > b { display: block; margin-bottom: 2px; color: var(--text-2); }
.cn-hooks { margin: 4px 0 0; }
.cn-warn { color: var(--t-amber); }
.cn-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.cn-form { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule); }
.cn-events { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 18px; border: 0;
  padding: 0; margin: 4px 0 0; min-width: 0; }
.cn-events legend { padding: 0; margin-bottom: 6px; }
.cn-events label { display: flex; gap: 8px; align-items: center; cursor: pointer; line-height: 1.35; }

.cn-list { margin-top: 6px; max-height: min(62vh, 600px); overflow: auto; }
.cn-sub { margin: 18px 0 4px; font-size: 13px; font-weight: 650; color: var(--text-2); }
.cn-list .cn-sub:first-child { margin-top: 4px; }

@media (max-width: 600px) {
  .cn-group { margin-top: 30px; }
  .cn-row { align-items: flex-start; }
  .cn-acts { width: 100%; }
  .cn-acts .btn { flex: 1 1 auto; justify-content: center; }
  .cn-acts select.input { flex: 1 1 100%; }
  .cn-list { max-height: none; }
}