/* The Configure modal (#3480, design epic #3432; Nov-4 Figma 1:12246) on the
 * Connect modal's frame (pages/integrations-connect.css shares its head, body
 * and foot rules). integrations-configure.ts draws it. Tokens only; fields
 * are ds/forms' .field (the issue: no page-local field CSS).
 * Deviations: the drawn #9ca3af helper and guidance text fail AA on white,
 * so they use --fg-muted; Disconnect, the chips' notes, the banners and the
 * per-field errors are not in Figma. */

/* Labels in the body: Inter Medium 11 (1:12287). */
.int-cfg-flabel { margin: 0; font: 500 11px/normal var(--font-sans); color: var(--fg-muted); }
#int-configure-modal .field > label { font: 500 11px/normal var(--font-sans); color: var(--fg-muted); }
.int-cfg-help, .int-cfg-meta { margin: 0; font: 400 10px/1.5 var(--font-sans); color: var(--fg-muted); }
#int-configure-modal .field { display: grid; gap: var(--space-2); }

/* The status badge in RECONNECT NEEDED's tone. */
.int-cm-selected.int-cfg-warn { border-color: var(--warning-fg); background: var(--warning-bg); color: var(--warning-fg); }

/* Authentication (1:12273): the masked credential and Replace, 36 high. */
.int-cfg-cred { display: flex; gap: var(--space-2); }
.int-cfg-secret {
  display: flex; flex: 1 1 auto; min-width: 0; align-items: center; gap: 10px; height: 36px; margin: 0; padding: 0 12px;
  background: var(--surface-sunken); border: 1px solid var(--border-strong); border-radius: var(--radius-lg, 8px);
  font: 400 11px/normal var(--font-mono); color: var(--fg-strong);
}
.int-cfg-secret svg { flex: none; color: var(--fg-muted); }
#int-configure-modal .int-cfg-replace { flex: none; width: 112px; min-height: 36px; height: 36px; }
.int-cfg-meta a { color: inherit; }

/* Revoked, an older grant, a missing comment scope: the note and its button. */
.int-cfg-banner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 10px 14px;
  border-radius: var(--radius); background: var(--warning-bg); color: var(--warning-fg); font: var(--type-body-sm);
}
.int-cfg-banner p { margin: 0; }
.int-cfg-banner .btn { flex: none; }

/* Teams and projects: chips (1:12326's look), several kept (owner, 2026-11-04). */
.int-cfg-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.int-cfg-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 7px; border-radius: var(--radius-sm, 4px);
  background: var(--surface-sunken); font: 400 10px/normal var(--font-mono); color: var(--fg-strong);
}
.int-cfg-chip-key, .int-cfg-chip-note { color: var(--fg-muted); }
.int-cfg-chip-x {
  display: inline-grid; place-items: center; width: 16px; height: 16px; margin: -3px -4px -3px 0; padding: 0;
  border: 0; border-radius: var(--radius-sm, 4px); background: none; color: var(--fg-muted); cursor: pointer;
}
.int-cfg-chip-x:hover { color: var(--fg-strong); background: var(--surface-disabled); }
.int-cfg-chip-x:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

/* Toggle rows (Comment in ..., code details): the label and its line. */
#int-configure-modal .int-cfg-switch { margin: 0; }
.int-cfg-switch > span { display: grid; gap: 2px; font: 400 12px/normal var(--font-sans); color: var(--fg-strong); }

.int-cfg-commands { margin: 0; padding-left: 18px; font: var(--type-body-sm); color: var(--fg-muted); }
#int-configure-modal textarea { min-height: 96px; font: 400 11px/1.6 var(--font-mono); }

/* Save's outcome: neutral and success read as notes, danger as the error. */
.int-cfg-alert[data-tone="success"] { background: var(--success-bg); color: var(--success-fg); }
.int-cfg-alert[data-tone="neutral"] { background: var(--surface-sunken); color: var(--fg-strong); }

/* Footer: Disconnect left, Cancel and Save changes right. */
#int-configure-modal .int-cfg-disconnect { margin-right: auto; }
#int-configure-modal .ui-modal-foot > .btn-secondary { width: auto; min-width: 0; }
@media (min-width: 641px) {
  #int-configure-modal .ui-modal-foot > .btn-primary { flex: 0 1 200px; }
}

#int-configure-modal .form-note { margin: 0; font: var(--type-body-sm); }