/* Integrations area (app-integrations.js): the Integrations screen and
   Settings, My connections. Rose UI 2026: provider cards on paper, one plain
   status chip per connection (volt when connected and good, neutral when off,
   coral only when something failed), and checks that tick in. The shared
   card and chip look lives in the settings block at the end of styles.css;
   the --s-* aliases it defines on .integrations are used here. */
.integrations { gap: 28px; }
.integrations-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 16px; }
.integrations-intro { margin: 0; color: var(--s-muted, var(--text-2)); font-size: var(--fs-md); line-height: 1.5; max-width: 62ch; }
.integrations-head .btn { flex: none; }
.integration-readonly,
.integration-separate,
.integration-banner {
  margin: 0;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--s-card-2, var(--surface-2));
  border: 1px solid var(--s-line, var(--border-faint));
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ink, var(--text-2));
}
.integration-banner { display: flex; gap: 10px; align-items: baseline; background: var(--s-volt-soft, var(--ok-bg)); border-color: transparent; }
.integration-banner::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--s-volt, var(--ok)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--s-volt-ink, #1f2a00) 30%, transparent); }
.integration-banner.is-bad { background: var(--s-coral-soft, var(--warn-bg)); color: var(--s-coral-ink, var(--warn-fg)); }
.integration-banner.is-bad::before { background: var(--s-coral, var(--warn)); box-shadow: none; }
.integration-separate { background: var(--brand-soft, var(--accent-bg)); border-color: transparent; }

/* groups: a sentence-case group label with the volt dot */
.integration-group { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.integration-group-title {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--s-muted, var(--muted));
}
.integration-group-title::before {
  content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%;
  background: var(--s-volt, #cff465);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--s-volt-ink, #1f2a00) 28%, transparent);
}

/* provider cards */
.integration-card .card-head { align-items: center; flex-wrap: nowrap; }
.integration-card .card-head > div { flex: 1 1 auto; }
.integration-card .card-title { margin: 0; }
.integration-mark {
  display: grid; place-items: center; flex: none;
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--s-paper-2, var(--surface-2));
  color: var(--ink, var(--text));
  border: 1px solid var(--s-line, var(--border-faint));
}
.integration-mark svg { width: 20px; height: 20px; }
.integration-card:has(.integration-status .badge-ok) .integration-mark { background: var(--ink); color: var(--s-on-ink, #fff); border-color: var(--ink); }
.integration-card .card-body { display: flex; flex-direction: column; gap: 14px; }

/* one connection row */
.integration-connection {
  display: flex; flex-direction: column; gap: 10px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--s-line, var(--border-faint));
  min-width: 0;
}
.integration-connection:last-of-type { border-bottom: 0; padding-bottom: 0; }
.integration-status { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; font-size: var(--fs-sm); }
.integration-status .badge[data-state="needs_attention"],
.integration-status .badge[data-state="error"] {
  background: var(--s-coral-soft, var(--danger-bg));
  border-color: transparent;
  color: var(--s-coral-ink, var(--danger-fg));
}
.integration-status .badge[data-state="needs_attention"]::before,
.integration-status .badge[data-state="error"]::before { background: var(--s-coral, var(--danger)) !important; box-shadow: none !important; }
.integration-status .badge[data-state="connected"] { animation: int-pop var(--s-d3, 420ms) var(--s-pop, ease-out) both; }
.integration-detail { color: var(--ink, var(--text-2)); overflow-wrap: anywhere; line-height: 1.45; }
.integration-muted { color: var(--s-muted, var(--text-3)); font-size: var(--fs-xs); }
.integration-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 16px;
  margin: 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--s-card-2, var(--surface-2));
}
.integration-facts div { min-width: 0; }
.integration-facts dt { font-size: var(--fs-xs); font-weight: 500; color: var(--s-muted, var(--text-3)); }
.integration-facts dd { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--ink, var(--text)); overflow-wrap: anywhere; line-height: 1.4; }
.integration-next { margin: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--ink, var(--text)); }
.integration-action { display: flex; }
.integration-notice {
  font-size: var(--fs-sm);
  line-height: 1.5;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--s-card-2, var(--surface-2));
  border: 1px solid var(--s-line, var(--border-faint));
  overflow-wrap: anywhere;
  animation: int-rise var(--s-d3, 420ms) var(--s-ease, ease-out) both;
}
.integration-notice.is-bad { background: var(--s-coral-soft, var(--warn-bg)); color: var(--s-coral-ink, var(--warn-fg)); border-color: transparent; }
.integration-notice p { margin: 0 0 6px; }
.integration-notice ol, .integration-notice ul { margin: 0; padding-left: var(--sp-5); }
.integration-notice form { margin-top: 8px; }

/* "Checks passed": each check ticks in, one after another */
.integration-checks { list-style: none; padding-left: 0 !important; display: grid; gap: 6px; }
.integration-checks li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--ink, var(--text)); }
.integration-checks li.is-bad { color: var(--s-coral-ink, var(--danger-fg)); }
.integration-check-box {
  display: inline-grid; place-items: center; flex: none;
  width: 18px; height: 18px; border-radius: 5px;
  font-size: 11px; font-weight: 700; line-height: 1;
  animation: int-tick var(--s-d3, 420ms) var(--s-pop, ease-out) both;
  animation-delay: calc(min(var(--i, 0), 12) * 90ms);
}
.integration-checks li.is-ok .integration-check-box { background: var(--ink, var(--text)); color: var(--s-on-ink, #fff); }
.integration-checks li.is-bad .integration-check-box { background: var(--s-coral, var(--danger)); color: #fff; }
.integration-checks li[data-revocation] { padding: 8px 0; border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent); }

.integration-manage summary,
.integration-capabilities summary,
.integration-mapping summary {
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 32px;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--s-muted, var(--text-3));
  list-style: none;
}
.integration-manage summary::-webkit-details-marker,
.integration-capabilities summary::-webkit-details-marker,
.integration-mapping summary::-webkit-details-marker { display: none; }
.integration-manage summary::before,
.integration-capabilities summary::before,
.integration-mapping summary::before {
  content: ""; width: 5px; height: 5px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--s-d2, 220ms) var(--s-ease, ease-out);
}
.integration-manage[open] summary::before,
.integration-capabilities[open] summary::before,
.integration-mapping[open] summary::before { transform: rotate(45deg); }
.integration-manage summary:hover,
.integration-capabilities summary:hover,
.integration-mapping summary:hover { color: var(--ink, var(--text)); }
.integration-manage .row { margin-top: 6px; }
.integration-capabilities ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; font-size: var(--fs-xs); color: var(--ink, var(--text)); }
.integration-capabilities li { display: flex; gap: 8px; align-items: baseline; }
.integration-capabilities li > span[aria-hidden] { flex: none; width: 14px; text-align: center; font-weight: 700; }
.integration-capabilities li.is-no { color: var(--s-muted, var(--text-3)); }
.integration-empty { margin: 0; padding: 16px; border: 1px dashed var(--s-line-strong, var(--border)); border-radius: var(--s-r-card, 12px); }
.integration-mapping summary { color: var(--ink, var(--text-2)); font-weight: 600; }
.integration-mapping form, .integration-mapping ul { margin-top: 8px; }
.integration-mapping ul { padding-left: var(--sp-5); font-size: var(--fs-sm); }
.integration-map-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 14rem) auto; align-items: center; gap: 8px; font-size: var(--fs-sm); }
.integration-map-row > span:first-child { overflow-wrap: anywhere; }
.integration-owner { margin: 0; font-size: var(--fs-xs); color: var(--ink, var(--text-2)); font-weight: 600; }

/* what a connection runs per office (Retell's AI receptionist) */
.integration-controls { display: grid; gap: 10px; }
.integration-controls-intro { margin: 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--ink, var(--text-2)); }
.integration-control-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.integration-control {
  display: grid; gap: 6px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--s-card-2, var(--surface-2));
  border: 1px solid var(--s-line, var(--border-faint));
  min-width: 0;
}
.integration-control.is-ok { border-color: color-mix(in srgb, var(--s-volt, var(--ok)) 70%, transparent); }
.integration-control.is-warn { background: var(--s-coral-soft, var(--warn-bg)); border-color: transparent; }
.integration-control-name { font-size: var(--fs-sm); font-weight: 600; color: var(--ink, var(--text)); overflow-wrap: anywhere; }
.integration-control-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: var(--fs-xs); line-height: 1.45; color: var(--ink, var(--text-2)); }
.integration-control-lines li { overflow-wrap: anywhere; }
.integration-control.is-warn .integration-control-lines li:last-child { color: var(--s-coral-ink, var(--warn-fg)); font-weight: 600; }
.integration-control-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }

@keyframes int-tick { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: none; } }
@keyframes int-pop { from { transform: scale(0.9); } to { transform: none; } }
@keyframes int-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .integration-check-box, .integration-notice, .integration-status .badge { animation: none !important; }
}

@media (max-width: 640px) {
  .integration-card .card-head { flex-wrap: wrap; }
  .integration-facts { grid-template-columns: minmax(0, 1fr); }
  .integration-capabilities ul { grid-template-columns: minmax(0, 1fr); }
  .integration-action .btn { width: 100%; justify-content: center; min-height: 44px; }
  .integration-map-row { grid-template-columns: minmax(0, 1fr); }
  .integration-manage summary, .integration-capabilities summary, .integration-mapping summary { min-height: 44px; }
  .integration-control-actions .btn { flex: 1 1 auto; justify-content: center; min-height: 44px; }
}

/* the Integrations screen's own header row */
.integrations-title { display: grid; justify-items: start; gap: 10px; min-width: 0; }
.integrations-title .view-title { margin: 0; }

/* wide screens: provider cards sit two to a row within their group */
.integration-group { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); gap: 16px; }
.integration-group > :not(.integration-card) { grid-column: 1 / -1; }
.integrations > .view-head { margin-bottom: 0; }

/* One row, one status, one action: the chip on the left, the action at the
   right end of the same line; everything else sits beneath. */
.integration-connection { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; row-gap: 10px; }
.integration-connection > * { grid-column: 1 / -1; min-width: 0; }
.integration-connection > .integration-status { grid-column: 1; grid-row: 1; }
.integration-connection > .integration-action { grid-column: 2; grid-row: 1; justify-content: flex-end; }
.integration-connection:has(> .integration-owner) > .integration-owner { grid-row: 1; }
.integration-connection:has(> .integration-owner) > .integration-status,
.integration-connection:has(> .integration-owner) > .integration-action { grid-row: 2; }
/* the row's own Check sits outside Manage, so Manage keeps only what is rarer */
.integration-connection:has(> .integration-action [data-integration-action="check"]) .integration-manage [data-integration-action="test"] { display: none; }
@media (max-width: 640px) {
  .integration-connection > .integration-action,
  .integration-connection:has(> .integration-owner) > .integration-action { grid-column: 1 / -1; grid-row: auto; }
}
.integration-action .btn.btn-ghost { border-color: var(--s-line-strong, var(--border)); }
.integration-action .btn.btn-ghost:hover { border-color: var(--ink); }