/* The Integrations area: the list, an integration and its own pages, all on the shared zones and lists. Only the
   columns of each list and a few small pieces live here. */

/* ---------- The columns of each list ---------- */
.in-list { --rl-cols: 222px minmax(160px, 1fr) minmax(0, 1.2fr) 200px 120px 150px 40px; --rl-cols-md: 222px minmax(0, 1fr) 200px 40px; }
.in-list.has-switch { --rl-cols: 222px minmax(160px, 1fr) minmax(0, 1.2fr) 200px 100px 130px 196px; --rl-cols-md: 222px minmax(0, 1fr) 200px 196px; }
.in-concepts { --rl-cols: 222px minmax(160px, 1fr) minmax(0, 1.2fr) 200px 120px 208px; --rl-cols-md: 222px minmax(0, 1fr) 130px; }
.in-types { --rl-cols: minmax(0, 1.2fr) 210px minmax(0, 1fr) 96px 170px 40px; --rl-cols-md: minmax(0, 1fr) 210px 40px; }
.in-syncs { --rl-cols: 10px minmax(0, 1fr) 150px; }
.in-conns { --rl-cols: 96px minmax(0, 1fr) 140px 40px; }
.in-runs { --rl-cols: 10px minmax(0, .8fr) minmax(0, 1.2fr) 80px 150px; --rl-cols-md: 10px minmax(0, 1fr) 150px; }
.in-usedby { --rl-cols: minmax(0, 1fr) 160px 220px; --rl-cols-md: minmax(0, 1fr) 220px; }
.in-addable { --rl-cols: 26px minmax(0, 1fr) 210px 150px; --rl-cols-md: 26px minmax(0, 1fr) 150px; }

/* ---------- Small pieces ---------- */
/* How many records a record type linked, with its share of the integration as a bar in its own colour. */
.in-share { display: grid; gap: 6px; }
.in-bar { display: block; width: 100%; max-width: 160px; height: 6px; border-radius: var(--r-full); background: var(--panel-3); overflow: hidden; }
.in-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--rtc, var(--brand)); }

/* A cell that holds a sentence keeps to one line. */
.in-cut { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* A figure that is a word or a moment instead of a number. */
.in-fig-word { font-size: 22px; line-height: 1.2; }

/* The head icon of a page that is not a record type. */
.in-ic-steel { --rtc: var(--accent-steel); }
.in-ic-sky { --rtc: var(--accent-sky); }
.in-ic-teal { --rtc: var(--accent-teal); }

/* How many options a choice of one shows side by side. */
.in-opts-1 { --opts: 1; }
.in-opts-2 { --opts: 2; }
.in-opts-3 { --opts: 3; }
.in-opts-4 { --opts: 4; }

/* A zone that ends on its choice of one: the strip's own line ends it. */
.in-optzone { border-bottom: 0; }

/* A setting that needs the full width (a switch with its own label, a checklist, a table) between the settings rows. */
.in-frow-wide { padding: 16px 0; border-top: 1px solid var(--line-soft); }
.in-frow-wide:first-child { padding-top: 4px; border-top: 0; }

/* Adding a record type: what already syncs stays in the list, quieter, with a tick where the others have their pick. */
.in-pick { display: grid; place-items: center; width: 26px; }
.in-pick svg { width: 15px; height: 15px; color: var(--ok); }
.in-pick input[type="radio"] { width: 18px; height: 18px; margin: 0; accent-color: var(--brand); }
.rl-row.in-done .rl-name b { color: var(--ink-2); }

@container page (max-width: 640px) {
  .in-syncs .rl-head { display: none; }
  .in-syncs .rl-row { grid-template-columns: 10px minmax(0, 1fr); row-gap: 2px; }
  .in-syncs .rl-row > .rl-num { grid-column: 2; text-align: left; }
  .rl-stack.in-addable .rl-row { grid-template-columns: 26px minmax(0, 1fr) auto; }
  .rl-stack.in-addable .rl-row > .in-pick { grid-column: 1; grid-row: 1; }
  .rl-stack.in-addable .rl-row > .rl-type { grid-column: 2; grid-row: 1; }
  .rl-stack.in-addable .rl-row > .rl-status { grid-column: 3; grid-row: 1; }
}

/* An account without integrations: examples to start from, each a row that opens the setup filled in. */
.in-start { --rl-cols: 222px minmax(0, 1fr) minmax(0, .9fr) 130px 96px; --rl-cols-md: 222px minmax(0, 1fr) 96px; }
.in-start .rl-chips .chip svg { width: 13px; height: 13px; }