/* Stacked panels reserve the largest content height, even before a tab is selected. */
.integration-panel { display: grid; align-items: stretch; min-width: 0; }
.integration-pane {
  grid-area: 1 / 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  visibility: hidden;
  opacity: 0;
  transform: translateY(7px);
  pointer-events: none;
  transition: opacity 220ms ease, transform 260ms cubic-bezier(.2,.7,.2,1), visibility 220ms;
}
.integration-pane.active { visibility: visible; opacity: 1; transform: none; pointer-events: auto; }
.integration-pane .provider-grid { grid-template-rows: repeat(5, minmax(80px, auto)); }
.integration-pane .provider { min-width: 0; }
.integration-pane .provider > span:last-child { overflow-wrap: anywhere; }
.integration-note { margin-top: 24px; font-size: 14px; line-height: 1.8; color: #59674f; }
.integration-tabs button { flex: 1 1 0; min-width: 0; }
.integration-tabs button > div { font-weight: 800; }
.integration-tabs button, .console-tabs button {
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, box-shadow 220ms ease;
}
.integration-tabs button:hover:not([aria-selected=true]), .console-tabs button:hover:not([aria-selected=true]) { background-color: #edf3e6; }
.integration-tabs button b { transition: transform 220ms ease; }
.integration-tabs button[aria-selected=true] b { transform: translate(2px, -2px); }
.console-tabs button { font-weight: 800; }
.console-caption { min-height: 2em; }
.button, .nav-cta, .text-link {
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, box-shadow 200ms ease, transform 180ms ease;
}
.button:hover, .nav-cta:hover { box-shadow: 0 6px 18px #263b2314; }
.button:active, .nav-cta:active { transform: translateY(1px) scale(.985); }
.primary:hover { background: #344c37; }
.nav nav a { transition: color 180ms ease; }
.screenshot-button > span { transition: background-color 180ms ease, transform 180ms ease; }
.screenshot-button:hover > span { background: #344c37; transform: translateY(-2px); }
summary { transition: color 180ms ease; }
summary:hover { color: #527534; }
details[open] > p { animation: content-enter 230ms ease both; }
dialog[open] { animation: dialog-enter 220ms ease both; }
dialog[open]::backdrop { animation: backdrop-enter 200ms ease both; }
@keyframes content-enter { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
@keyframes dialog-enter { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes backdrop-enter { from { opacity: 0; } to { opacity: 1; } }
@supports (interpolate-size: allow-keywords) {
  details { interpolate-size: allow-keywords; }
  details::details-content { block-size: 0; overflow: clip; transition: block-size 240ms ease, content-visibility 240ms allow-discrete; }
  details[open]::details-content { block-size: auto; }
}
@media (max-width: 520px) {
  .nav nav.open { animation: content-enter 200ms ease both; }
  .integration-tabs button { justify-content: center; }
  .integration-pane .provider-grid { grid-template-rows: repeat(5, minmax(84px, auto)); }
  .console-caption { min-height: 4em; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after, details::details-content { animation: none !important; transition: none !important; }
  .integration-pane { transform: none; }
}