/* Integrations hero window: field-mapping lines from "Your system" to three apps, then a sync log.
   Shell and tokens (.app, .app__bar, .status, .mod) come from /style.css. */
.int .side__pill { transform: translateY(64px); } /* finished state sits on Sync log (two 30px rows + 2px gaps down); hero.js moves it with y */
.int-card { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.int-card__head { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-bottom: 1px solid var(--line); }
.int-card__head > b { font-weight: 600; white-space: nowrap; }
.int-card__head > span { margin-left: auto; color: var(--muted-fg); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.int-card__head > span b { color: var(--fg); font-weight: 600; }

/* Mapping: the source, the wires, three apps. Rows of 34px with 6px gaps match the wires' 114px viewBox. */
.int-map { display: grid; grid-template-columns: minmax(0, .8fr) 64px minmax(0, 1.2fr); align-items: center; padding: 10px 12px; }
.int-src { position: relative; display: flex; align-items: center; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--sunk); font-weight: 600; line-height: 1.2; }
.int-wires { display: block; width: 100%; height: 114px; }
.int-track { stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 3 3; }
.int-wire { stroke: var(--coral); stroke-width: 1.75; stroke-dasharray: 100; }
.int-dst { display: grid; gap: 6px; }
.int-dst li { position: relative; display: grid; align-content: center; height: 34px; padding: 0 10px; border: 1px dashed #d4d4d8; border-radius: 8px; color: var(--muted-fg); line-height: 1.2; } /* app over its data, so a 470px window still fits */
.int-dst li.is-on { border: 1px solid var(--line); color: var(--fg); }
.int-dst b { font-weight: 600; white-space: nowrap; }
.int-dst span { color: var(--muted-fg); font-size: 11.5px; white-space: nowrap; }
/* Ports where the wires meet the boxes */
.int-src::after, .int-dst li::before { content: ""; position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--coral); }
.int-src::after { right: -4px; }
.int-dst li::before { left: -4px; }
.int-dst li:not(.is-on)::before { background: var(--bg); box-shadow: inset 0 0 0 1.5px #d4d4d8; }

/* Sync log: time, record, app, OK */
.int-log li { display: grid; grid-template-columns: 38px 72px minmax(0, 1fr) auto; align-items: center; column-gap: 10px; height: 30px; padding: 0 12px; }
.int-log li + li { border-top: 1px solid var(--line); }
.int-log time { color: var(--muted-fg); font-size: 12px; font-variant-numeric: tabular-nums; }
.int-log b { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.int-log span { color: var(--muted-fg-2); white-space: nowrap; }
.int-ok { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border: 1px solid var(--ok-line); border-radius: 6px; background: var(--ok-bg); color: var(--ok); font-size: 11.5px; font-weight: 600; font-style: normal; }
.int-ok svg { width: 11px; height: 11px; stroke-width: 3; }

@media (max-width: 600px) {
  .int .int-crumb { display: none; } /* the bar keeps the record name and the status badge */
  .int-map { grid-template-columns: minmax(0, .8fr) 44px minmax(0, 1.2fr); padding: 10px; }
  .int-src { padding: 8px; font-size: 12px; }
  .int-src .cell__leaf { display: none; }
  .int-dst li { padding: 0 8px; }
  .int-dst b { font-size: 12px; }
  .int-dst span { font-size: 11px; }
  .int-log li { grid-template-columns: 34px minmax(0, 1fr) auto; grid-template-areas: "t b k" "t x k"; height: auto; padding: 6px 12px; }
  .int-log time { grid-area: t; }
  .int-log b { grid-area: b; }
  .int-log span { grid-area: x; font-size: 12px; }
  .int-ok { grid-area: k; }
}
@media (max-width: 400px) {
  .int .app__bar > .cell__leaf { display: none; }
  .int-map { grid-template-columns: minmax(0, .8fr) 32px minmax(0, 1.2fr); }
}