/* ---- Integrations -------------------------------------------------------
 *
 * The Integrations tab of the brand's own admin: every source as its mark,
 * in the inbox's on/off idiom, with its facts behind it in a dialog.
 * Deliberately plainer than the metric drawer: that one opens onto a figure
 * worth looking at, this one onto yes-or-no answers, and giving it the same
 * ink headline card would dress "Meta Ads is not connected" up as a result.
 */

/* `.panel` carries no padding of its own — every child provides it, the way
   .panel-head and .connected-list do. */
.integration-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 8px;
  margin: 0;
  padding: 8px 20px 20px;
  list-style: none;
}

.integration__tile {
  display: grid;
  justify-items: center;
  gap: 4px;
  width: 100%;
  padding: 18px 10px 14px;
  font: inherit;
  color: var(--k-color-ink);
  text-align: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--k-radius-panel);
  cursor: pointer;
  transition: background-color var(--k-duration-fast) var(--k-ease-standard),
    border-color var(--k-duration-fast) var(--k-ease-standard);
}

.integration__tile:hover {
  background: var(--k-color-lavender-soft);
}

.integration__tile:focus-visible {
  border-color: var(--k-color-violet);
  outline: none;
}

.integration__mark {
  position: relative;
  margin-bottom: 6px;
}

.integration__mark .source-mark {
  width: 48px;
  height: 48px;
  margin: 0;
  font-size: 20px;
  border-radius: 12px;
}

/* Not connected, or needing attention, says so with a dot, as the inbox's
   channel buttons do: the mark stays, so a quiet source is told apart from
   a dropped one. */
.integration__dot {
  position: absolute;
  top: -3px;
  inset-inline-end: -3px;
  width: 12px;
  height: 12px;
  background: var(--k-color-warning);
  border: 2px solid var(--k-color-paper);
  border-radius: 50%;
}

.integration--not_connected .integration__dot {
  background: var(--k-color-control-border);
}

.integration__label {
  font-size: 13px;
  font-weight: 700;
}

.integration__status {
  font-size: 12px;
  font-weight: 600;
  color: var(--k-color-muted);
}

.integration--connected .integration__status {
  color: var(--k-color-success);
}

.integration--attention .integration__status {
  color: var(--k-color-warning);
}

/* A source that is not connected is dimmed; an unbuilt connector more so —
   it is not a source that failed, so it gets no colour of its own. */
.integration--not_connected .integration__mark,
.integration--not_connected .integration__label {
  opacity: 0.45;
}

.integration--unsupported .integration__tile {
  opacity: 0.45;
}

/* ---- The dialog behind a mark: the shell is the customer page's
   `.cp-dialog`. */

.source__title {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.source__title .source-mark {
  flex: none;
  width: 36px;
  height: 36px;
  margin: 0;
  font-size: 15px;
  border-radius: 9px;
}

.source__title > div {
  min-width: 0;
}

.source__headline {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--k-color-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The state in words, beside the dot that colours it. */
.source__state {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--k-color-line);
}

.source__dot {
  width: 9px;
  height: 9px;
  background: var(--k-color-control-border);
  border-radius: 50%;
}

.source--connected .source__dot {
  background: var(--k-color-success);
}

.source--attention .source__dot {
  background: var(--k-color-warning);
}

.source__status {
  font-size: 12px;
  font-weight: 700;
  color: var(--k-color-muted);
}

.source--connected .source__status {
  color: var(--k-color-success);
}

.source--attention .source__status {
  color: var(--k-color-warning);
}

/* Auto-fit rather than a fixed three: a source shows as few as two facts and
   as many as six, and a fixed track would leave a hole. */
.source__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 12px;
  margin: 14px 0 0;
}

.source__facts dt {
  font-size: 12px;
  font-weight: 700;
  color: var(--k-color-muted);
}

.source__facts dd {
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: 500;
}

.source__warning,
.source__note,
.source__handoff {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.5;
}

.source__warning {
  padding: 9px 11px;
  color: var(--k-color-warning);
  background: var(--k-color-warning-bg);
  border-radius: var(--k-radius-control);
}

.source__note,
.source__handoff {
  color: var(--k-color-muted);
}

/* The system's primary button at the list's scale. */
.source__link {
  display: inline-flex;
  align-items: center;
  height: 36px;
  margin-top: 12px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--k-color-paper);
  text-decoration: none;
  background: var(--k-color-violet);
  border-radius: var(--k-radius-button);
  transition: background-color var(--k-duration-fast) var(--k-ease-standard);
}

.source__link:hover {
  background: var(--k-color-violet-deep);
}

/* The ad accounts already connected, on the merchant's own Meta page. */

/* `.panel` carries no padding of its own — every child provides it, the way
   .panel-head and .profile-form do. */
.connected-list {
  margin: 0;
  padding: 4px 20px;
  list-style: none;
}

.connected-list__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--k-color-line);
}

.connected-list__item:last-child {
  border-bottom: 0;
}

.connected-list__item strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
}

/* The account's currency and timezone, which is why they are mono: they are
   identifiers to be compared against another account's, not prose. */
.connected-list__item span:not(.badge) {
  display: block;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--k-color-muted);
}

/* Four controls on one row is more than a narrow panel holds, so they wrap and
   stay right-aligned rather than pushing the account name out of the row. */
.connected-list__state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

/* The row's buttons are secondary to the connect form below, and to each other
   only by colour — they are all one tap and none of them is the reason the
   page exists. */
.connected-list__state .button {
  min-height: 36px;
  margin-top: 0;
  padding: 0 12px;
  font-size: 12px;
}

.connected-list__error {
  flex-basis: 100%;
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--k-color-warning);
}

/* The ad accounts a Facebook login can see, each behind a checkbox. The
   whole row is the label, because the checkbox alone is a small target and
   the row already reads as one thing. Inside .profile-form, which pads the
   panel, so the list's own side padding comes off. */
.pick-list {
  padding: 0 0 12px;
}

.pick-list__choice {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  cursor: pointer;
}

.pick-list__choice .field__check {
  flex: none;
  width: 16px;
  height: 16px;
  accent-color: var(--k-color-violet);
}

.connected-list .badge--measured {
  color: var(--k-color-success);
  background: var(--k-color-success-bg);
}

.connected-list .badge--forecast {
  color: var(--k-color-warning);
  background: var(--k-color-warning-bg);
}