/* Integrations (Figma 435:7435, P1). The frame uses an older wireframe style; rebuilt here with Nexus tokens. */
.p-int__hero { padding-bottom: var(--space-4); }
.p-int__hero .container { display: grid; justify-items: start; gap: var(--space-6); }
.p-int__title { max-width: 720px; }
.p-int__lead { max-width: 680px; color: var(--text-medium); }
.p-int__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-10); padding-top: var(--space-10); border-top: 1px solid var(--border-thin); }
.p-int__groups { display: grid; gap: var(--space-10); }
.p-int__group-title { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: var(--fw-regular); font-size: var(--body-sm-size); letter-spacing: 0.08em; line-height: 1.4; text-transform: uppercase; color: var(--text-medium); }
.p-int__cards { display: grid; gap: var(--space-4); margin-top: var(--space-4); }
.p-int__card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); cursor: pointer; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.p-int__card:hover { border-color: var(--border-strong); }
.p-int__card.is-selected { border-color: var(--amber-800); box-shadow: 0 0 0 3px var(--focus-ring); }
.p-int__card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.p-int__name { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--body-lg-size); }
.p-int__name svg { width: 14px; height: 14px; }
.p-int__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.p-int__dot--sq { border-radius: 2px; }
.p-int__desc { font-size: var(--para-sm-size); line-height: var(--para-sm-lh); color: var(--text-medium); }
.p-int__status { align-self: flex-start; margin-top: auto; padding: 2px var(--space-2); border-radius: var(--radius-pill); background: var(--mint-100); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; color: var(--emerald-600); }
.p-int__card.is-off .p-int__status { background: var(--base-medium); color: var(--text-low); }

.p-int__terminal { align-self: start; padding: var(--space-6); }
.p-int__terminal-sub { margin-top: var(--space-1); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border-thin); font-size: var(--para-sm-size); color: var(--text-medium); }
.p-int__code { margin-top: var(--space-5); border-radius: var(--radius-md); background: var(--code-bg); color: var(--code-text); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; line-height: 1.6; }
.p-int__code-bar, .p-int__code-foot { display: flex; justify-content: space-between; align-items: center; padding: var(--space-3) var(--space-4); color: var(--code-muted); font-size: 11px; }
.p-int__code-foot { border-top: 1px solid rgb(255 255 255 / 0.08); }
.p-int__copy { color: var(--code-muted); font-size: 11px; }
.p-int__copy:hover { color: var(--code-text); }
.p-int__copy { position: relative; }
.p-int__copy::before { content: ""; position: absolute; inset: -13px -8px; } /* 44px hit area */
.p-int__code pre { min-height: 150px; padding: var(--space-2) var(--space-4) var(--space-5); overflow-x: auto; white-space: pre; }
.p-int__live { width: 8px; height: 8px; border-radius: 50%; background: var(--emerald-500); box-shadow: 0 0 0 3px rgb(0 188 125 / 0.2); animation: p-int-pulse 1.6s ease-in-out infinite; }
@keyframes p-int-pulse { 50% { opacity: 0.4; } }
@media (prefers-reduced-motion: reduce) { .p-int__live { animation: none; } }
@media (min-width: 640px) { .p-int__cards { grid-template-columns: 1fr 1fr; } .p-int__card { min-height: 176px; } }
@media (min-width: 1024px) {
  .p-int__layout { grid-template-columns: minmax(0, 1fr) 388px; gap: var(--space-12); padding-top: var(--space-12); }
  .p-int__terminal { position: sticky; top: calc(var(--header-h) + var(--space-8)); }
}

/* Figma QC: this page sits in a 1000px column (hero copy 768, grid 563 + terminal 389, 48px gap) */
@media (min-width: 1024px) {
  .page-integrations .p-int__hero .container, .page-integrations .p-int__layout { max-width: calc(1000px + var(--gutter) * 2); }
  .p-int__hero { padding-top: calc(var(--header-h) + var(--space-2) + 64px); }
  .p-int__title { max-width: 768px; }
  .p-int__layout { grid-template-columns: minmax(0, 563px) 389px; gap: 48px; }
}
@media (min-width: 1024px) {
  .p-int__hero { padding-bottom: 61px; }
  .p-int__title { font-size: var(--h2-size); line-height: var(--h2-lh); letter-spacing: var(--h2-ls); }
  .p-int { padding-top: 0; }
  .p-int__layout { border-top: 0; background: linear-gradient(var(--border-thin), var(--border-thin)) center top / calc(100% - var(--gutter) * 2) 1px no-repeat; }
  .p-int__groups { gap: 32px; }
  .p-int__group-title { font-size: 12px; }
  .p-int__card { gap: var(--space-2); padding: var(--space-4); }
  .p-int__name { font-size: var(--body-md-size); }
  .p-int__desc { font-size: 13px; line-height: 19px; }
}

/* ---------- Interactions (option C "Editor tabs") ---------- */
/* Cards: lift on hover, press on click, ring on keyboard focus; selected card gets a dark outline and a check badge */
.p-int__card {
  position: relative;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.p-int__card:hover { border-color: var(--border-strong); box-shadow: 0 6px 18px rgb(0 0 0 / 0.06); transform: translateY(-2px); }
.p-int__card:active { transform: translateY(0) scale(0.99); transition-duration: var(--dur-fast); }
.p-int__card:focus-visible { outline: none; border-color: var(--border-strong); box-shadow: 0 0 0 3px var(--focus-ring); }
.p-int__card.is-selected, .p-int__card.is-selected:hover { border-color: var(--text-strong); box-shadow: 0 6px 18px rgb(0 0 0 / 0.06); }
.p-int__check { position: absolute; top: -7px; right: -7px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--text-strong); color: var(--base-high); transform: scale(0); transition: transform var(--dur-slow) var(--ease-spring); }
.p-int__check svg { width: 10px; height: 10px; }
.p-int__card.is-selected .p-int__check { transform: scale(1); }

/* Disconnected: card quiets down, status pill flips with a small pop */
.p-int__name, .p-int__desc { transition: opacity var(--dur) var(--ease); }
.p-int__card.is-off .p-int__name, .p-int__card.is-off .p-int__desc { opacity: 0.5; }
.p-int__status { transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.p-int__status.is-changed { animation: p-int-pop var(--dur-slow) var(--ease-spring); }
@keyframes p-int-pop { 0% { transform: scale(0.85); opacity: 0.4; } 100% { transform: none; opacity: 1; } }

/* Terminal: file tabs like a code editor, green underline slides to the active file, config slides in */
.p-int__code-bar { position: relative; padding: 0; border-bottom: 1px solid rgb(255 255 255 / 0.08); }
/* keep the absolutely placed tab ink from widening the page when the active tab is scrolled out of view */
.p-int__code { overflow: hidden; }
.p-int__tabs { display: flex; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); }
.p-int__tabs::-webkit-scrollbar { display: none; }
.p-int__tab { flex: none; padding: var(--space-3) var(--space-3); color: var(--code-muted); font-size: 11px; transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.p-int__tab:hover { color: var(--code-text); }
.p-int__tab[aria-selected="true"] { color: var(--code-text); background: rgb(255 255 255 / 0.05); }
.p-int__tab:focus-visible { outline: 2px solid var(--emerald-500); outline-offset: -2px; }
.p-int__ink { position: absolute; bottom: -1px; left: 0; width: 0; height: 2px; background: var(--emerald-500); transition: left 350ms var(--ease-out), width 350ms var(--ease-out); }
.p-int__code-bar .p-int__copy { flex: none; padding: 0 var(--space-4); }
.p-int__code-bar .p-int__copy::before { inset: -13px 0; }
.p-int__code pre { padding-top: var(--space-4); transition: opacity var(--dur) var(--ease); }
.p-int__code pre.is-swapping { animation: p-int-in 300ms var(--ease-out); }
@keyframes p-int-in { from { opacity: 0; transform: translateX(8px); } }
.p-int__terminal.is-offline pre { opacity: 0.45; }
.p-int__live { transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.p-int__terminal.is-offline .p-int__live { background: var(--code-muted); box-shadow: none; animation: none; }
.p-int__copy { transition: color var(--dur) var(--ease); }
.p-int__copy.is-copied { color: var(--emerald-500); }

@media (prefers-reduced-motion: reduce) {
  .p-int__card, .p-int__card:hover, .p-int__card:active { transform: none; }
  .p-int__check, .p-int__ink { transition: none; }
  .p-int__status.is-changed, .p-int__code pre.is-swapping { animation: none; }
}