/* connector.css - Connectors surface
 *
 * Extracted verbatim from style.css. Rules keep their original
 * relative order, and @media rules travel with the surface so its
 * responsive overrides still land after the rules they override.
 */
.connectors-view { padding: 24px; max-width: 1400px; margin: 0 auto; }
.connectors-header { display: flex; align-items: center; justify-content: flex-end; margin-bottom: 16px; gap: 16px; flex-wrap: wrap; }
.connectors-header--tools { justify-content: flex-end; }
.connectors-header h2,
.connectors-header > div > p:not(.connectors-demo-note) { display: none; }
.connectors-search { flex: 1; max-width: 320px; padding: 8px 12px; border: 1px solid #2a2a2a; border-radius: 8px; background: #1a1a1a; color: var(--text-primary); }
.connectors-category-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.connectors-category-chip { padding: 4px 12px; border: 1px solid #2a2a2a; border-radius: 999px; font-size: 12px; cursor: pointer; background: transparent; color: var(--text-secondary); }
.connector-card-icon { width: 32px; height: 32px; color: var(--text-secondary); margin-bottom: 12px; }
.connector-card.connected .connector-card-icon { color: #2196F3; }
/* Brand logos: keep fills as painted (do not inherit the blue stroke tint). */
.connector-card-logo {
  display: block;
  width: 36px;
  height: 36px;
  margin-bottom: 12px;
  border-radius: 8px;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.04);
  padding: 4px;
  box-sizing: border-box;
}
.connector-card-name { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.connector-card-desc { color: var(--text-secondary); font-size: 13px; margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.connector-card-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.connector-card-category { font-size: 11px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.5px; }
.connector-card-status { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; display: inline-flex; align-items: center; gap: 6px; }
.connector-status-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.connector-status-connected .connector-status-dot { background: #16a34a; }
.connector-status-disconnected .connector-status-dot { background: #6b7280; }
.connector-card-actions { display: flex; gap: 8px; }
.connector-connect-btn { background: #2196F3; color: #fff; border: none; padding: 6px 14px; border-radius: 6px; font-size: 13px; cursor: pointer; }
.connector-disconnect-btn { background: transparent; color: #dc2626; border: 1px solid #2a2a2a; padding: 6px 14px; border-radius: 6px; font-size: 13px; cursor: pointer; }
.connector-manage-btn { background: transparent; color: var(--text-secondary); border: 1px solid #2a2a2a; padding: 6px 14px; border-radius: 6px; font-size: 13px; cursor: pointer; }
.connector-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 9998; display: flex; align-items: center; justify-content: center; }
.connector-modal { background: var(--surface, #fff); border-radius: 12px; padding: 24px; max-width: 480px; width: calc(100vw - 48px); box-shadow: 0 10px 40px rgba(0,0,0,0.3); }
.connector-modal-input { width: 100%; padding: 8px 12px; border: 1px solid var(--border, #e5e7eb); border-radius: 6px; font-size: 13px; margin-bottom: 12px; box-sizing: border-box; }
.connector-modal-actions { display: flex; gap: 8px; justify-content: flex-end; }
.connector-drawer-features { list-style: disc inside; padding: 0; margin: 8px 0 16px 0; color: var(--text-secondary); font-size: 13px; }
.connector-drawer-features li { margin-bottom: 4px; }
.connector-drawer-meta { font-size: 12px; color: var(--text-tertiary); margin-bottom: 4px; }

@media (max-width: 820px) {
  .connectors-view .pred-grid { grid-template-columns: 1fr; }
}

/* ── v42.4 additions ──────────────────────────────────────────────────────────
 * Three gaps in the rules above, found by rendering the page:
 *
 * 1. .pred-grid is `grid-template-columns: 1fr` in style.css and becomes
 *    `1fr 1fr` at >=1080px in predictions.css, which also spans its FIRST
 *    child across the whole row. On the connectors surface that stretched
 *    FieldRoutes edge to edge and capped the rest at two columns.
 * 2. .connector-card had no box of its own; it borrowed .pred-card, which is
 *    not a flex column, so action buttons sat directly under variable-length
 *    descriptions instead of aligning along the bottom of each card.
 * 3. Internal pipelines (FieldRoutes, CTM) report sync health rather than a
 *    connect state, so they need stale/unknown dots and a managed note.
 * ─────────────────────────────────────────────────────────────────────────── */

.connectors-view .pred-grid {
  grid-template-columns: repeat(auto-fill, minmax(296px, 1fr));
  align-items: stretch;
}
/* Cancel the predictions hero-card span; every connector card is equal weight. */
.connectors-view .pred-grid > .pred-card:first-child { grid-column: auto; }

.connector-card { display: flex; flex-direction: column; min-width: 0; }
.connector-card-desc { overflow-wrap: break-word; }
.connector-card-meta { gap: 10px; flex-wrap: wrap; }
.connector-card-actions { margin-top: auto; flex-wrap: wrap; }

/* style.css:3247 is `.composer-chip, [class*="chip"], [class*="tag"]` with
 * background-color: var(--chip-bg) = rgba(33,150,243,.08). The container class
 * `connectors-category-chips` contains "chip", so the whole row picked up a
 * full-width blue pill behind the buttons. The codebase already neutralizes
 * this global rule per surface in five other places; same fix here. */
.connectors-category-chips { background-color: transparent; border-color: transparent; }

.connector-status-stale .connector-status-dot { background: #ffb74d; }
.connector-status-unknown .connector-status-dot { background: #6b7280; }
.connector-status-stale { color: #ffb74d; }

/* Internal pipelines: a freshness note where the buttons would be. */
.connector-card--internal .connector-card-actions {
  margin-top: auto;
  padding-top: 11px;
  border-top: 1px solid rgba(255, 255, 255, .06);
}
.connector-managed-note {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-tertiary);
}

@media (max-width: 820px) {
  .connectors-view .pred-grid { grid-template-columns: 1fr; }
  /* The header is a centered row, so `flex: 1` on the search box left it
   * competing with the title and collapsing to a few characters wide.
   * Stack the header instead of letting the input shrink. */
  .connectors-header { flex-direction: column; align-items: stretch; gap: 12px; }
  .connectors-search { flex: 1 1 auto; max-width: none; width: 100%; box-sizing: border-box; }
  .connector-card-actions > button { flex: 1 1 auto; text-align: center; }
}

/* v42.4 Pipedream Connect ─────────────────────────────────────────────────── */

/* Live OAuth state is not binary. A connection can exist and still be broken
   because the user revoked access at the provider, or be unverifiable because
   Pipedream is unreachable. Each gets its own colour so the card is honest. */
.connector-status-error .connector-status-dot { background: #ef5350; }
.connector-status-warn .connector-status-dot { background: #ffb74d; }

/* Lightened the same way .connector-status-stale is: #dc2626 is fine for the
   13px Disconnect button but drops to about 3.5:1 as an 11px status label on
   this dark card. #ef5350 pairs with the #ffb74d amber below. */
.connector-status-error { color: #ef5350; }
/* Same amber as .connector-status-stale above. The darker #b45309 used for
   light themes fails contrast on this surface. */
.connector-status-warn { color: #ffb74d; }

/* Whether a connection is shared by the company or personal to one user. Sits
   between the description and the category/status row. Both that row and this
   one are small tertiary text, so without deliberate separation they read as a
   single wrapped paragraph. The gap below plus the lighter weight keeps them
   distinct at 325px desktop and 342px mobile card widths. */
.connector-card-scope {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--text-tertiary, #999);
  margin: 12px 0 9px;
  letter-spacing: 0.01em;
}

/* Personal vs Company segmented control on OAuth cards.
   Dark Connectors surface: --text-primary is #f0f2f5, so a white active fill
   with that token made the selected label invisible (looked like a broken /
   misaligned pill). Equal columns + dark elevated fill keep both labels
   readable and the thumb visually centered. */
.connector-scope-toggle {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  width: 100%;
  max-width: 220px;
  margin: 10px 0 10px;
  padding: 2px;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.04);
  gap: 0;
}
.connector-scope-btn {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: rgba(232, 233, 235, 0.55);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  padding: 6px 8px;
  cursor: pointer;
  letter-spacing: 0.01em;
  text-align: center;
  white-space: nowrap;
  min-width: 0;
  transition: background 140ms ease, color 140ms ease;
}
.connector-scope-btn + .connector-scope-btn {
  border-left: none;
}
.connector-scope-btn.is-active {
  background: rgba(255, 255, 255, 0.14);
  color: #F0F2F5;
  box-shadow: none;
  font-weight: 600;
}
.connector-scope-btn:hover:not(.is-active) {
  color: rgba(232, 233, 235, 0.85);
  background: rgba(255, 255, 255, 0.05);
}
.connector-scope-btn:focus-visible {
  outline: 1px solid rgba(33, 150, 243, 0.55);
  outline-offset: 1px;
}

/* Small neutral marker so the scope row is visually anchored and never mistaken
   for the status row, which uses a coloured dot of the same size. */
.connector-card-scope::before {
  content: "";
  width: 10px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
  flex: 0 0 auto;
}

/* Disabled state while the connect request is in flight. */
.connector-connect-btn:disabled,
.connector-manage-btn:disabled {
  opacity: 0.55;
  cursor: default;
  pointer-events: none;
}

/* Missing-configuration modal. */
.connector-modal-note {
  font-size: 12px;
  color: var(--text-secondary, #666);
  margin: 12px 0 6px;
}

.connector-modal-list {
  margin: 0 0 4px;
  padding-left: 18px;
  font-size: 12px;
  color: var(--text-secondary, #666);
}

.connector-modal-list li { margin: 2px 0; }

.connector-modal-list code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  /* Deliberately not --surface-alt: that token is not defined in tokens.css,
     so a light hex fallback would render light-on-light here. A translucent
     overlay tracks whatever surface the modal actually uses. */
  background: rgba(127, 137, 153, 0.16);
  border: 1px solid var(--border, #3A4050);
  color: inherit;
  border-radius: 4px;
  padding: 1px 5px;
  /* Long env names must not widen the modal on a phone. */
  overflow-wrap: anywhere;
}