/* Connect your coding agent (#3481 part 2, design epic #3432):
 * #/integrations/coding-agent. Designed by us, not in Figma: Figma has no
 * coding-agent frame. Built in the integrations language Sentry's page uses
 * (app/pages/sentry.css): the Integrations header (#3476), cards with a mono
 * "// label" (#3479's section label), Integrations' provider rows (.int-row,
 * .int-logo) for the agent tiles, ds forms, buttons and banners.
 * coding-agent.ts draws it; sentry.ts draws its loading frame.
 * Tokens only; light and dark come from tokens.css. */

/* ---- Page and header (as Integrations and Sentry) ---- */
.ca-detail { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); min-width: 0; }
.ca-detail > .back { display: inline-flex; align-items: center; gap: 6px; width: max-content; margin: 0 0 calc(-1 * var(--space-3)); font: 500 13px/20px var(--font-sans); color: var(--fg-muted); text-decoration: none; }
.ca-detail > .back:hover { color: var(--fg-strong); }
.ca-detail > .page-header { align-items: center; margin: 0; }
.ca-detail > .page-header h1 { font: 600 22px/normal var(--font-sans); letter-spacing: normal; color: var(--fg-strong); }
.ca-detail > .page-header .subtitle { margin-top: 7px; font: var(--type-body); color: var(--fg-muted); }
.ca-detail > .banner { margin: 0; }
.agent-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); min-width: 0; }

/* ---- Card with its mono section label ---- */
.ca-card {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); min-width: 0; box-sizing: border-box; padding: var(--space-5) var(--space-6);
  background: var(--surface); border: 1px solid var(--border-card); border-radius: var(--radius-lg);
}
.ca-card > p, .ca-card p { margin: 0; }
.ca-eyebrow { display: block; margin: 0; font: var(--type-code-eyebrow); letter-spacing: var(--type-code-eyebrow-tracking); color: var(--fg-muted); }
.ca-card-title { margin: 0; font: 600 16px/24px var(--font-sans); color: var(--fg-strong); }
.ca-card-text { font: 400 13px/20px var(--font-sans); color: var(--fg); }
.ca-note, .ca-card .muted { font: 400 13px/20px var(--font-sans); color: var(--fg-muted); }
.ca-card h3 { margin: var(--space-2) 0 0; font: 600 14px/20px var(--font-sans); color: var(--fg-strong); }
.ca-card code { font: 400 12px var(--font-mono); }
.ca-setup-copy { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }

/* ---- Your coding agent: the head, its disclosure, the explainer and the tiles ---- */
.ca-agents-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3); }
.ca-card-head { display: grid; gap: var(--space-1); min-width: 0; }
.ca-toggle svg { width: 14px; height: 14px; transition: transform var(--motion-fast, 120ms) var(--ease-standard, ease-in-out); }
.ca-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
#agent-options:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border); }

.agent-explainer { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-3); }
.agent-explain { display: grid; align-content: start; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--surface-sunken); }
.agent-explain h3 { margin: 0; }
.agent-explain-list { margin: 0; padding-left: 1.1em; display: grid; gap: var(--space-1); font: 400 13px/20px var(--font-sans); color: var(--fg-muted); }
.agent-explain-list a { color: var(--primary-text); }

/* Each agent is an Integrations provider row (#3476), the whole row its link. */
.ca-tiles > li + li { border-top: 1px solid var(--border); }
a.ca-tile { color: inherit; text-decoration: none; }
a.ca-tile:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.ca-tile .int-name { font: 600 14px/normal var(--font-sans); color: var(--fg-strong); }
.ca-tile-cta { display: inline-flex; flex: none; align-items: center; gap: 4px; font: 600 13px/20px var(--font-sans); color: var(--primary-text); }
.ca-tile-cta svg { width: 14px; height: 14px; transition: transform var(--motion-fast, 120ms) var(--ease-standard, ease-in-out); }
a.ca-tile:hover .ca-tile-cta svg, a.ca-tile:focus-visible .ca-tile-cta svg { transform: translateX(2px); }
/* The marks are monochrome currentColor, so they follow the tile's text color in both themes. */
.agent-mark-sm { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 20px; height: 20px; color: inherit; }
.agent-mark-sm svg { width: 16px; height: 16px; }

/* ---- The steps: key, config, test ---- */
.agent-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; }
.agent-new-key { margin: 0 0 var(--space-3); }
.agent-key-field { display: grid; gap: var(--space-1); margin: var(--space-2) 0 0; }
.agent-key-field label { font: 500 13px/19px var(--font-sans); color: var(--fg-strong); }
.agent-key-field input { width: 100%; max-width: 520px; }
.field-help { font: 400 12px/18px var(--font-sans); color: var(--fg-muted); }
.agent-tabs { flex-wrap: wrap; max-width: 100%; }
.agent-tabs button { display: inline-flex; align-items: center; gap: var(--space-2); }
#agent-snippets, #agent-test, #agent-keys { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
.agent-result { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-1) 0 0; }
.agent-result.banner { display: block; }

/* ---- What your agent can do: a fold, then one row per tool (Settings' rows, #3482) ---- */
.agent-tools-fold > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-3); align-items: center; cursor: pointer; list-style: none; }
.agent-tools-fold > summary::-webkit-details-marker { display: none; }
.agent-tools-fold > summary > .ca-eyebrow { grid-column: 1 / -1; }
.agent-tools-fold > summary svg { width: 16px; height: 16px; color: var(--fg-muted); transition: transform var(--motion-fast, 120ms) var(--ease-standard, ease-in-out); }
.agent-tools-fold[open] > summary svg { transform: rotate(180deg); }
.agent-tools-fold > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: var(--radius-sm); }
.agent-tools-fold[open] > summary { margin-bottom: var(--space-3); }
.ca-tools-list { list-style: none; margin: 0 0 var(--space-3); padding: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); }
.ca-tools-list li { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: var(--space-1) var(--space-4); padding: var(--space-3) var(--space-4); font: 400 13px/20px var(--font-sans); color: var(--fg-muted); }
.ca-tools-list li + li { border-top: 1px solid var(--border); }
.ca-tools-list code { color: var(--fg-strong); overflow-wrap: anywhere; }

@media (prefers-reduced-motion: reduce) {
  .ca-toggle svg, .ca-tile-cta svg, .agent-tools-fold > summary svg { transition: none; }
}

/* ---- Reflow (not in Figma): rows stack below 640 ---- */
@media (max-width: 640px) {
  .ca-card { padding: var(--space-4); }
  .ca-tiles .int-row { padding: var(--space-3) var(--space-4); }
  .ca-tools-list li { grid-template-columns: minmax(0, 1fr); }
}