/* Integrations (#3476, design epic #3432; Nov-4 Figma 1:10992, 1:12352):
 * the header with "Integration guide", groups by state (Connected, Available,
 * Coming soon) of provider rows, the request button and the footnote; the
 * guide drawer's body (designed by us, not in Figma). integrations.ts draws it. */

/* The page uses the main column's width (Figma: 1158 of 1238, 32 top, 40 sides). */
.content:has(.int-page) { padding: 32px 40px var(--space-7); }
.page:has(> .int-page) { max-width: none; }
.int-page { display: grid; gap: var(--space-6); }

/* ---- Header (1:11215) ---- */
.int-page > .page-header { align-items: center; margin-bottom: var(--space-3); } /* 12 + 24 = Figma's 36 to the body */
.int-page > .page-header h1 { font: 600 22px/normal var(--font-sans); letter-spacing: normal; color: var(--fg-strong); }
.int-page > .page-header .subtitle { margin-top: 7px; font: var(--type-body); color: var(--fg-muted); }
.int-page > .page-header .int-guide-btn { --btn-h: 32px; --btn-px: 12px; --btn-gap: 7px; border-color: var(--border); color: var(--fg-strong); }
.int-guide-btn svg { width: 14px; height: 14px; }

/* ---- Group heading (1:11285) and list card (1:11290) ---- */
.int-group { min-width: 0; } /* a grid item: the card row scrolls instead of widening the page */
.int-group[hidden] { display: none; }
.int-group-title { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); font: 600 15px/normal var(--font-sans); color: var(--fg-strong); }
.int-count {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  height: 21px; min-width: 22px; padding: 0 6px; border-radius: 5px;
  background: var(--surface-sunken); font: 400 11px/normal var(--font-sans); color: var(--fg-muted);
}
.int-card { overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.int-list { list-style: none; margin: 0; padding: 0; }
.int-divider { margin: 0; border: 0; border-top: 1px solid var(--border); }

/* ---- Provider row (1:11291) ---- */
.int-row {
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5);
  transition: background-color var(--motion-fast, 120ms) var(--ease-standard, ease-in-out);
}
.int-row:hover { background: var(--surface-row); } /* proposed, not in Figma */
@media (prefers-reduced-motion: reduce) { .int-row { transition: none; } }
.int-logo {
  display: grid; place-items: center; flex: none; width: 36px; height: 36px;
  border-radius: var(--radius); background: var(--surface-sunken); color: var(--fg-strong);
}
/* Dark (not in Figma): the vendors' marks keep their own colors, so they sit on a light tile. */
:root[data-theme="dark"] .int-logo:not(.int-logo-agent) { background: var(--logo-bg); color: var(--ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .int-logo:not(.int-logo-agent) { background: var(--logo-bg); color: var(--ink); } }
.int-logo svg { width: 22px; height: 22px; }
.int-logo-agent { background: var(--success-bg); color: var(--success-fg); }
.int-logo-agent svg { width: 20px; height: 20px; }
.int-info { display: grid; gap: 5px; flex: 1 1 auto; min-width: 0; }
.int-identity { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.int-name { margin: 0; font: 600 14px/normal var(--font-sans); color: var(--fg-strong); }
.int-category { font: 400 11px/normal var(--font-sans); color: var(--fg-muted); }
.int-desc { margin: 0; font: 400 12px/1.5 var(--font-sans); color: var(--fg-muted); }
.int-desc.int-failed { color: var(--danger-fg); }
.int-detail { margin: 0; font: 400 12px/1.5 var(--font-sans); color: var(--fg); }
.int-info .form-note, .int-info .small { margin: 0; font-size: 12px; }
.int-action { display: flex; flex: none; justify-content: flex-end; align-items: center; width: 185px; }
.int-action svg { width: 14px; height: 14px; }
.int-connect { min-width: 160px; }
.int-explore { min-width: 172px; }
.int-manage { min-width: 120px; }
.int-soon { font: 400 11px/normal var(--font-sans); color: var(--fg-muted); white-space: nowrap; }
.int-switch { display: inline-flex; align-items: center; }
/* A row whose status is still being checked keeps the action button's height, so it does not jump when the button arrives. */
.int-action-checking { display: inline-flex; align-items: center; min-height: 36px; }

/* ---- Connected cards (#3477; Figma 1:11224, 1:13025) ---- */
.int-group-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
.int-group-head .int-group-title { margin: 0; }
.int-count[hidden] { display: none; }
.int-health { margin: 0; font: var(--type-meta); line-height: normal; color: var(--fg-muted); }
.int-health-warn { color: var(--warning-fg); } /* proposed, not in Figma */

/* "Connected apps" (Figma: INSTALLED APPS; owner: never Install), the rule and the scroll button (1:11232). */
.int-cc-sub { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-6); }
.int-cc-label { margin: 0; font: var(--type-eyebrow); letter-spacing: 2px; text-transform: uppercase; color: var(--fg-muted); white-space: nowrap; } /* Figma #9ca3af fails AA */
.int-cc-rule { flex: 1 1 auto; height: 1px; margin-right: var(--space-3); background: var(--divider); }
.int-cc-scroll {
  display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; padding: 0; cursor: pointer;
  border: 1px solid var(--brand); border-radius: var(--radius-md); background: var(--brand-selected); color: var(--brand-mint);
  transition: background-color var(--motion-fast) var(--ease-standard, ease-in-out), opacity var(--motion-fast) var(--ease-standard, ease-in-out);
}
.int-cc-scroll { position: relative; }
.int-cc-scroll::after { content: ""; position: absolute; inset: -3px; } /* a 26px target for the 20px button (WCAG 2.5.8) */
.int-cc-scroll svg { width: 12px; height: 12px; }
.int-cc-scroll[data-mode="start"] svg { transform: scaleX(-1); } /* proposed, not in Figma */
.int-cc-scroll:hover:not(:disabled) { background: var(--brand-pressed); } /* proposed, not in Figma */
.int-cc-scroll:active:not(:disabled) { box-shadow: var(--shadow-pressed); }
.int-cc-scroll:disabled { cursor: default; border-color: var(--border); background: var(--surface-sunken); color: var(--fg-muted); } /* nothing to scroll: outlined, grey (1:12595) */
.int-cc-scroll:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* The row: three columns of 370 in 1158, gap 24; more scroll sideways, a card at a time. */
.int-cc-carousel { position: relative; }
.int-cc-carousel::before, .int-cc-carousel::after {
  content: ""; position: absolute; top: 0; bottom: 0; z-index: 1; width: 100px; pointer-events: none; opacity: 0;
  transition: opacity var(--motion-base) var(--ease-standard, ease-in-out);
}
.int-cc-carousel::before { left: 0; background: linear-gradient(to right, var(--bg), transparent); } /* 1:13119 */
.int-cc-carousel::after { right: 0; background: linear-gradient(to left, var(--bg), transparent); }  /* 1:13120 */
.int-cc-carousel[data-fade-left]::before, .int-cc-carousel[data-fade-right]::after { opacity: 1; }
.int-cc-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: max(min(280px, 85%), calc((100% - 48px) / 3)); gap: var(--space-6);
  margin: -4px; padding: 4px; list-style: none; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding: 4px; scrollbar-width: none;
}
.int-cc-track::-webkit-scrollbar { display: none; }
.int-cc-track:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--radius-2xl); }

/* The card (1:11240): 370 wide, radius 32, padding 33. */
.int-cc {
  display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; box-sizing: border-box; padding: 32px; scroll-snap-align: start;
  background: var(--surface); border: 1px solid var(--divider); border-radius: 32px; box-shadow: var(--shadow-card);
  transition: box-shadow var(--motion-fast) var(--ease-standard, ease-in-out);
}
.int-cc:hover { box-shadow: var(--shadow-toolbar); } /* proposed, not in Figma */
.int-cc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); }
.int-cc-logo {
  --tile: var(--surface-sunken);
  display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: var(--radius-2xl);
  background: var(--tile); color: var(--fg-strong);
  box-shadow: 0 20px 25px -5px color-mix(in srgb, var(--tile) 80%, var(--border-strong)), 0 8px 10px -6px color-mix(in srgb, var(--tile) 80%, var(--border-strong));
}
.int-cc-logo svg { width: 36px; height: 36px; }
.int-cc-logo-jira { --tile: var(--info-bg); }
.int-cc-logo-linear { --tile: var(--type-violet-bg); }
.int-cc-logo-sentry, .int-cc-logo-slack { border-radius: var(--radius); box-shadow: none; } /* 1:13072: flat */
.int-cc-logo-sentry svg, .int-cc-logo-slack svg { width: 35px; height: 35px; }
:root[data-theme="dark"] .int-cc-logo { --tile: var(--logo-bg); color: var(--ink); box-shadow: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .int-cc-logo { --tile: var(--logo-bg); color: var(--ink); box-shadow: none; } }
.int-cc-badge { min-height: 0; padding: 4px 8px; border: 1px solid transparent; border-radius: var(--radius-sm); font: var(--type-micro); letter-spacing: 0.9px; text-transform: uppercase; white-space: nowrap; }
.int-cc-badge.badge-warning { border-color: color-mix(in srgb, var(--warning-fg) 25%, transparent); }
.int-cc-name { margin: 0; padding-top: var(--space-4); font: 700 18px/28px var(--font-sans); letter-spacing: -0.45px; color: var(--fg-strong); }
.int-cc-desc { margin: 0; font: 500 12px/19.5px var(--font-sans); color: var(--fg-muted); }
.int-cc-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: auto; padding-top: 23.5px; }
.int-cc-meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--type-eyebrow); color: var(--fg-muted); }
[data-attention] .int-cc-meta { color: var(--warning-fg); }
.int-cc-meta .badge { font: inherit; padding: 0; border: 0; background: none; color: inherit; }
.int-cc-configure {
  display: inline-flex; align-items: center; gap: var(--space-1); flex: none; margin-left: auto; padding: 0; border: 0; background: none; cursor: pointer;
  font: var(--type-label); line-height: 16px; color: var(--primary-text); text-decoration: none; white-space: nowrap;
}
.int-cc-configure svg { width: 10px; height: 10px; }
.int-cc-configure:hover { text-decoration: underline; }
.int-cc-configure:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--radius-sm); }

.int-cc-skel-logo { width: 56px; height: 56px; margin-bottom: var(--space-4); border-radius: var(--radius-2xl); }
.int-cc-skel-short { width: 50%; }

/* The GitHub card's Configure modal (designed by us, not in Figma). */
.int-gh-section { display: grid; gap: var(--space-2); }
.int-gh-section + .int-gh-section { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--border); }
.int-gh-title { margin: 0; font: var(--type-title-sm); color: var(--fg-strong); }
.int-gh-text { margin: 0; font: var(--type-body-sm); line-height: 1.5; color: var(--fg-muted); }
.int-gh-section .btn { width: max-content; }
.int-gh-section .form-note, .int-gh-section .small { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .int-cc, .int-cc-scroll, .int-cc-carousel::before, .int-cc-carousel::after { transition: none; }
}

/* Where issues are filed (#2811), under the Connected cards: not in Figma, so
   drawn as a group (#3877), the heading (1:11285) and a card of rows (1:11291). */
.int-destination:not(:has(.int-dest)) { display: none; }
.int-destination { margin-top: var(--space-6); }
.int-dest-card { min-width: 0; margin: 0; padding: 0; }
.int-dest-row { cursor: pointer; }
.int-dest-card:disabled .int-dest-row, .int-dest-row:has(input:disabled) { cursor: default; }
.int-dest-row:has(input:disabled):hover { background: none; }
.int-dest-soon { min-height: 0; padding: 2px 6px; font: 400 11px/normal var(--font-sans); }

/* ---- Request an integration (not in Figma), the footnote (1:11383) ---- */
.int-request { display: flex; justify-content: flex-end; }
.int-footnote { display: flex; align-items: center; gap: 7px; margin: 0; font: 400 11px/1.5 var(--font-sans); color: var(--fg-muted); }
.int-footnote svg { flex: none; width: 12px; height: 12px; }

/* ---- The guide drawer's body (designed by us, not in Figma) ---- */
.int-guide-intro { margin: 0 0 var(--space-5); font: var(--type-body); color: var(--fg-muted); }
.int-guide-item { display: grid; gap: var(--space-2); padding: var(--space-4) 0; border-top: 1px solid var(--border); }
.int-guide-item[hidden] { display: none; }
.int-guide-name { margin: 0; font: var(--type-title-sm); color: var(--fg-strong); }
.int-guide-steps { margin: 0; padding-left: 1.25em; display: grid; gap: var(--space-1); font: 400 12px/1.5 var(--font-sans); color: var(--fg-muted); }
.int-guide-link { display: inline-flex; align-items: center; gap: 4px; width: max-content; font: var(--type-label); color: var(--primary-text); }
.int-guide-link svg { width: 12px; height: 12px; }

/* ---- Narrow screens: the action goes under the text (not in Figma) ---- */
@media (max-width: 640px) {
  .content:has(.int-page) { padding: var(--space-5) var(--space-4) var(--space-6); }
  .int-row { flex-wrap: wrap; align-items: flex-start; }
  .int-info { flex-basis: calc(100% - 48px); }
  .int-action { width: 100%; justify-content: flex-start; padding-left: 48px; }
  .int-page > .page-header { align-items: flex-start; }
}

/* ---- "Connect your first tool" (#3478): Figma's empty-state card (1:13438:
   illustration 12 above a 20/28 title, 14/22 body) beside the GitHub card,
   filling the row's other two columns. Owner decision, not in Figma: beside
   GitHub (2026-11-05); it takes the row's card shape (1:11240) so the two
   read as one row, and a Primary button to Available (no CTA in Figma). ---- */
.int-cc-first[hidden] { display: none; }
.int-cc-first {
  display: grid; place-items: center; grid-column: span 2; min-width: 0; box-sizing: border-box; scroll-snap-align: start;
  background: var(--surface); border: 1px solid var(--divider); border-radius: 32px; box-shadow: var(--shadow-card);
}
.int-cc-first .ms-state { gap: 0; padding: var(--space-6) var(--space-5); }
.int-cc-first .ms-state-art { margin-bottom: var(--space-3); }
.int-cc-first .ms-state-title { font: 600 20px/28px var(--font-sans); color: var(--fg-strong); }
.int-cc-first .ms-state-body { max-width: 52ch; font: 400 14px/22px var(--font-sans); color: var(--fg-muted); }
.int-cc-first .ms-state-action { margin-top: var(--space-4); }
.int-cc-first .ms-state-action svg { width: 14px; height: 14px; }
/* Narrow screens: one column like the other cards, and the art scales down. */
@media (max-width: 640px) {
  .int-cc-first { grid-column: span 1; }
  .int-cc-first .ms-plug { width: 100%; max-width: 220px; height: auto; }
}