/* Harness page: the client setup card.
 *
 * The markup for .integration-setup has been live since upstream-probe-20260912
 * but its rules were never published, so the card renders unstyled above five
 * styled cards. This file supplies exactly those rules and nothing else.
 *
 * It ships as a separate stylesheet rather than as a new copy of styles.css:
 * redesign-20260907/styles.css is served with a 30-day immutable cache and is
 * named in the PROTECTED set of every downstream publisher. Loaded after it, so
 * these rules win on equal specificity without needing !important.
 *
 * Values are taken from .integration-model-picker and .integration-card so the
 * card reads as the same component family. That includes the page's unusually
 * small type scale (h2 14px, body 10px, notes 9px) — matching it is the point.
 */

/* Same horizontal band as .integration-model-picker directly below it: copy on
   the left, panel on the right. A vertical stack read as a different kind of
   component than every other card on the page. */
.integration-setup {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(320px, 1.6fr);
  align-items: start;
  gap: 22px;
  margin-bottom: 18px;
  padding: 19px;
}

.integration-setup__copy {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
}

/* Duplicated from the .integration-model-picker__icon / .integration-card__icon
   group in styles.css. That grouped selector cannot be extended from here, so
   the tile geometry is restated verbatim to keep the three icons identical. */
.integration-setup__icon {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 11px;
  color: var(--primary-700);
  background: var(--primary-100);
}

.integration-setup__icon .icon {
  width: 19px;
  height: 19px;
}

.integration-setup__copy h2 {
  margin: 0 0 4px;
  font-size: 14px;
}

.integration-setup__copy p {
  margin: 0;
  color: var(--ink-500);
  font-size: 10px;
  line-height: 1.55;
}

/* .integration-code pre is sized for the 2-up harness grid, where a config
   snippet fills 252px and every card must end level. This card holds two lines
   of shell at full page width, so without an override it renders as an empty
   dark slab taller than the copy beside it. Scoped, so the harness cards below
   keep their equal-height grid. Padding matches the harness cards' 15px so the
   command starts on the same inset as every snippet below it. */
.integration-setup .integration-code pre {
  min-height: 0;
  max-height: none;
  padding: 15px;
  overflow: visible;
}

/* The command is one long shell line. .integration-code code is white-space:
   pre for config snippets, which here clips the tail of the command behind a
   horizontal scrollbar nobody notices. Wrap at the panel edge instead; a URL
   has no spaces, so anywhere is the only break opportunity that works. */
.integration-setup .integration-code code {
  display: block;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Same inset and top gap as .integration-card__foot, so the notes sit on the
   line the harness cards' footers sit on. */
.integration-setup__notes {
  display: grid;
  grid-column: 1 / -1;
  gap: 7px;
  margin: 11px 1px 0;
  padding: 0;
  list-style: none;
}

.integration-setup__notes li {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  color: var(--ink-400);
  font-size: 9px;
  line-height: 1.55;
}

.integration-setup__notes .icon {
  flex: 0 0 auto;
  margin-top: 1px;
}

/* Breakpoints mirror .integration-model-picker exactly. Without them the card
   would keep two columns while every sibling collapsed. */
@media (max-width: 1120px) {
  .integration-setup {
    grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1.4fr);
  }
}

@media (max-width: 760px) {
  .integration-setup {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .integration-setup {
    gap: 16px;
    padding: 16px;
  }

  .integration-setup__copy {
    align-items: flex-start;
  }

  /* styles.css narrows .integration-code pre to 13px here. This sheet's
     override is more specific and loads later, so without restating the
     narrow value the setup card would hold 15px while every harness card
     below it stepped in to 13px. */
  .integration-setup .integration-code pre {
    padding: 13px;
  }
}