/* web/connectors_page.css — [TRN5 connectors-page-v1]
   Page chrome for the Connectors page. Card internals come from the .dc-*
   component styles in app.css (shared with the quick panel); this file adds
   only the page grid, status pills, the admin strip and the oauth note —
   all on the shell's existing tokens, no raw hex (brand kit rule 1, and the
   tranche-3 graphite token swap restyles this page for free). */

.cpg-page { max-width: 1140px; }

.cpg-head { display: flex; align-items: center; gap: 10px; }
.cpg-head #cpg-search {
  width: 220px; height: 32px; padding: 0 10px; border-radius: 9px;
  background: var(--tb-surface, var(--surface, #0000));
  border: 1px solid var(--tb-border-strong, var(--tb-border, currentColor));
  color: inherit; font: inherit; font-size: 13px;
}

.cpg-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  margin-top: 12px;
}
.cpg-grid .dc-card { margin: 0; }

/* status pills — 12/600, radius 999, colour + a word, never colour alone */
.cpg-pill {
  font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px;
  margin-left: 8px; white-space: nowrap;
  background: var(--tb-surface-2, rgba(127,127,127,.12));
  color: var(--tb-text-secondary, inherit);
  border: 1px solid var(--tb-border, currentColor);
}
.cpg-pill.ok   { background: var(--tb-success-soft, rgba(198,242,78,.13));
                 color: var(--tb-success, inherit);
                 border-color: var(--tb-border, currentColor); }
.cpg-pill.warn { background: var(--tb-warning-soft, rgba(245,181,68,.13));
                 color: var(--tb-warning, inherit);
                 border-color: var(--tb-border, currentColor); }
.cpg-pill.mut  { opacity: .8; }

.cpg-oauth {
  font-size: 12px; line-height: 1.5; margin: 6px 0 0;
  color: var(--tb-text-muted, inherit);
}

/* ---------------- admin strip ---------------- */
.cpg-adminwrap {
  margin: 14px 0 6px; border: 1px solid var(--tb-border, currentColor);
  border-radius: 14px; padding: 10px 14px;
  background: var(--tb-surface, transparent);
}
.cpg-adminwrap > summary { cursor: pointer; font-weight: 600; }
.cpg-alist { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }

.cpg-arow {
  border: 1px solid var(--tb-border, currentColor); border-radius: 10px;
  padding: 10px 12px; background: var(--tb-surface-2, transparent);
}
.cpg-arow-head { display: flex; align-items: center; gap: 8px; }
.cpg-arow-head .flex { flex: 1; }

.cpg-switch { display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; cursor: pointer; }
.cpg-switch input { accent-color: var(--tb-accent, currentColor); }

.cpg-grants { margin-top: 8px; font-size: 13px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cpg-grants select {
  height: 28px; border-radius: 8px; font-size: 13px;
  background: var(--tb-surface, transparent); color: inherit;
  border: 1px solid var(--tb-border-strong, var(--tb-border, currentColor));
}
.cpg-grant {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px;
  background: var(--tb-accent-soft, rgba(127,127,255,.14));
  border: 1px solid var(--tb-accent-border, var(--tb-border, currentColor));
}
.cpg-x { background: none; border: none; color: inherit; cursor: pointer;
  font-size: 13px; padding: 0 2px; }

.cpg-addco { margin-top: 8px; }
.cpg-addco > summary { cursor: pointer; font-size: 13px;
  color: var(--tb-accent-text, inherit); }
.cpg-addco .dc-fields { margin-top: 8px; }

/* [P2 C8 cred-probe-v1] pre-save probe verdict under the key fields */
.dc-probe-note {
  margin: 6px 0 2px; font-size: 12px; line-height: 1.45;
  color: var(--tb-warn, var(--warn, #d9a53d));
}

/* ===== [prjx3-x-corner-v1] keep the page search clear of the global X. */
.cpg-head { padding-right: 56px; }