/* ==========================================================================
   integrations.css — the /integrations page. Loads after feature-v2/v3, show.css, pillars-lab.css and home.css.

   The page answers one question: does Cloutly work with what you run? Three things live here: the hero moment (a sale,
   a wire, the text it produced), the answer picker (name-only tiles grouped by category over one panel; the panels are
   stacked in a single grid cell so a pick never changes the card's height or moves the page), and the two lower bands,
   the connect screen and the three build-it routes.

   Rules this file keeps:
   * Nothing renders under 13px. The shared .shot-h runs at 11.5px and .m-from at 12.5px, so both are lifted here.
   * Every muted colour is #6b7088 or darker on white. No #8b90a6, no #9a9fb6.
   * The idle tiles carry a #7d8398 ring, which is 3.5:1 on their own fill, so eleven controls read as controls
     (WCAG 1.4.11). The build-it tile carries a blue ring instead, because it is the one that is not a system.
   * The picker's tiles are names in text: they are eleven controls in a radio group, not brand marks. The real
     vendor marks live where the product puts them, on the ported connect screen below.
   * Never a count. Nothing in this file lays the systems out as an inventory: the runs are categories, and a category
     takes as many names as it has.
   ========================================================================== */

/* the shared mock furniture runs under 13px; on this page it does not. */
.int-page .shot-h { font-size: 13px; }
.int-page .m-from { font-size: 13px; }

/* ==========================================================================
   hero moment: the sale, the wire, the text
   ========================================================================== */
.int-page .hero-moment { display: flex; justify-content: flex-end; padding: 12px 0; }
.int-page .int-moment { max-width: 430px; gap: 0; }
.int-page .int-src, .int-page .int-ask { padding: 16px 18px; }
.int-sale { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 2px 16px; align-items: baseline; }
.int-sale b { grid-area: 1 / 1; font: 600 16px/1.35 var(--font-display); color: var(--ink); }
.int-sale span { grid-area: 2 / 1; font: 400 13.5px/1.4 var(--font-body); color: var(--v2-body); }
.int-sale em { grid-area: 1 / 2 / 3 / 3; align-self: center; font: 600 19px/1.2 var(--font-display); font-style: normal; font-variant-numeric: tabular-nums; color: var(--ink); }

/* the wire: the one line that says the two cards are the same event. A rail, the event it carries, and a dot where
   Cloutly picks it up. It is the only thing in this hero that its two siblings do not have, so it is long enough and
   labelled enough to be read as a mechanism rather than as a tick. */
.int-wire { position: relative; height: 58px; margin-left: 30px; }
.int-wire i { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; border-radius: 2px; background: linear-gradient(#9db2f0, var(--blue)); }
.int-wire span { position: absolute; left: 16px; top: 3px; font: 600 13px/1.3 var(--font-display); color: #52586e; }
.int-wire::after { content: ""; position: absolute; left: -4px; bottom: 1px; width: 10px; height: 10px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px rgba(0, 61, 255, .18); }
@media (prefers-reduced-motion: no-preference) {
  .int-wire i { transform-origin: top; animation: int-wire 1.1s var(--ease-out) .45s backwards; }
  @keyframes int-wire { from { transform: scaleY(0); } }
}
.no-motion .int-wire i { animation: none; }

.int-page .int-ask p { font: 400 15px/1.55 var(--font-body); color: var(--ink); }
/* the two portraits sit clear of the cards rather than cropping their corners */
@media (min-width: 992px) {
  .int-page .pp--tl { left: -12%; top: -5%; }
  .int-page .pp--br { right: -11%; bottom: -4%; }
}
@media (max-width: 991px) { .int-page .hero-moment { justify-content: center; } }

/* ==========================================================================
   the answer picker
   ========================================================================== */
/* The picker runs the full width of the column rather than sitting in a copy-left / card-right shell. Two reasons:
   the lead is four lines now that the tiles carry the categories, so a two-column shell left half the band empty, and
   the shell itself is /reviews-qr-code's. A wide answer bar is this page's own shape. */
.int-card { padding: 24px 24px 20px; }
/* the instruction sits on the control, not 500px away at the foot of the copy column */
.int-pick-l { margin-bottom: 14px; font: 600 14px/1.4 var(--font-display); color: var(--ink); }

/* one row per category, the label in the same column the verdict lands in below, so the card reads down the same
   rail: category, then the names in it, then the answer. */
.int-tiles { display: grid; gap: 14px; }
.int-run { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 0 32px; align-items: start; }
.int-run-l { padding-top: 12px; font: 500 14px/1.35 var(--font-body); color: #52586e; }
.int-run-t { display: flex; flex-wrap: wrap; gap: 8px; }
.int-tile { padding: 11px 15px; border: 0; border-radius: 11px; background: var(--v2-card); box-shadow: inset 0 0 0 1px #7d8398; font: 600 14.5px/1.3 var(--font-display); color: var(--v2-body); cursor: pointer; transition: box-shadow .2s var(--ease-out), background-color .2s var(--ease-out), color .2s var(--ease-out); }
.int-tile--build { box-shadow: inset 0 0 0 1px #5b83f7; color: #002bb5; }
.int-tile:hover { color: var(--ink); box-shadow: inset 0 0 0 2px #4a5065; }
.int-tile--build:hover { color: #002bb5; box-shadow: inset 0 0 0 2px var(--blue); }
.int-tile:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.int-tile.is-on, .int-tile--build.is-on { background: var(--blue); color: #fff; box-shadow: inset 0 0 0 1px var(--blue), 0 10px 22px -12px rgba(0, 61, 255, .7); }
.int-tile.is-on:hover { color: #fff; box-shadow: inset 0 0 0 1px var(--blue), 0 10px 22px -12px rgba(0, 61, 255, .7); }

/* the panels share one grid cell, so the card is as tall as the tallest and a pick never moves the page */
.int-panes { display: grid; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--v2-line); }
/* every pane is both a cell of .int-panes (so they stack) and a grid of its own: the verdict on the left, the one
   line that answers the question on the right, so a wide card does not turn into a wide measure. */
.int-pane { grid-area: 1 / 1; visibility: hidden; opacity: 0; display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 0 32px; align-items: start; }
.int-pane.is-on { visibility: visible; opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .int-pane.is-on { animation: int-pane .4s var(--ease-out); }
  @keyframes int-pane { from { opacity: .3; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}
.no-motion .int-pane.is-on { animation: none; }

.int-pane-h { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 12px; }
.int-pane-h h3 { flex-basis: 100%; font: 600 21px/1.25 var(--font-display); letter-spacing: -.01em; color: var(--ink); }
/* the verdict, which is the whole of what the picker is for */
.int-kind { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 7px; font: 600 13px/1.3 var(--font-display); }
.int-kind .icon { width: 14px; height: 14px; }
.int-kind--yes { background: #ddf7ea; color: #0c7a52; }
.int-kind--build { background: var(--ghost); color: #002bb5; }
.int-pane > p { max-width: 62ch; font: 400 16px/1.6 var(--font-body); color: var(--ink); text-wrap: pretty; }
.int-note { margin-top: 20px; font-size: 13px; }

/* ==========================================================================
   section furniture: left-aligned heads, so the page is not three centred ones in a row
   ========================================================================== */
.int-page .int-head { max-width: 780px; margin: 0 0 36px; }
.int-page .int-head .sub { margin-inline: 0; }

/* ==========================================================================
   connecting one: the screen it happens on. Ported from cloutly-frontend@origin/master
   DashboardIntegrations/index.js:151-176 (the "Tools you already use" band and its own sub),
   Components/CloutlyBlockItem.js and index.module.scss (`reviewItemContainer`: a 1fr 2fr 1fr grid of img /
   title-over-subtitle / round link button, 12px padding on a CloutlyBlock, 30px radius, 1px #f1f0f5 border, and
   the product's own #c8facd ground on a connected tile), and components_v2/SearchInput (a magnifier over a
   "Search" placeholder). Two site rules override the product here: nothing under 13px, and the subtitle is
   #5b6076 rather than the product's #929292, which is 2.7:1 on white.
   ========================================================================== */
.int-connect-sec { background: var(--ghost); }
.int-screen { padding: 20px 22px 22px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--v2-line), var(--v2-shadow); }
.int-screen-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 18px; }
.int-screen-h b { display: block; font: 600 16px/1.3 var(--font-display); color: var(--ink); }
.int-screen-h > div > span { display: block; margin-top: 3px; font: 400 13.5px/1.45 var(--font-body); color: #5b6076; }
.int-search { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px #d1d5db; font: 400 13.5px/1 var(--font-body); color: #5b6076; }
.int-search .icon { width: 15px; height: 15px; fill: none; }
.int-screen-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
/* the product's tile: img | title over subtitle | round link button, on a rounded block with a #f1f0f5 border */
.int-blk {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) 34px; grid-template-rows: auto auto;
  align-items: center; column-gap: 10px; padding: 12px; border-radius: 20px;
  background: #fff; border: 1px solid #f1f0f5; box-shadow: 17px 13px 50px 0 rgba(0, 0, 0, .04);
}
.int-blk.is-on { background: #c8facd; border-color: #a9ecb1; }
.int-blk-i { grid-area: 1 / 1 / 3 / 2; display: grid; place-items: center; }
.int-blk-i .icon, .int-blk-i .mk-logo { width: 30px; height: 30px; object-fit: contain; }
.int-blk > b { grid-area: 1 / 2; min-width: 0; font: 500 14px/1.35 var(--font-display); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.int-blk > span { grid-area: 2 / 2; min-width: 0; font: 400 13px/1.35 var(--font-body); color: #5b6076; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.int-blk-b { grid-area: 1 / 3 / 3 / 4; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid #f1f0f5; color: #5b6076; }
.int-blk.is-on .int-blk-b { background: #006500; border-color: #006500; color: #fff; }
.int-blk-b .icon { width: 17px; height: 17px; fill: none; }
.int-note { max-width: 68ch; margin-top: 26px; font: 400 15.5px/1.6 var(--font-body); color: var(--v2-body); text-wrap: pretty; }
.int-note a { color: #002bb5; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.int-note a:hover { color: var(--ink); }

/* ==========================================================================
   the two build-it routes, each with the product screen it happens on
   (DashboardSettings/ApiKeys/index.js + ApiKeys/ApiKeyModal.js, and components/ContactsImportModal/index.js)
   ========================================================================== */
.int-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.int-panel { display: flex; flex-direction: column; padding: 26px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--v2-line); }
.int-panel h3 { font: 700 18px/1.3 var(--font-display); letter-spacing: -.01em; color: var(--ink); }
.int-panel > p { margin-top: 8px; max-width: 46ch; font: 400 14.5px/1.55 var(--font-body); color: var(--v2-body); text-wrap: pretty; }
.int-panel > p b { color: var(--ink); font-weight: 600; }
.int-panel > p a { color: #002bb5; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.int-panel > p a:hover { color: var(--ink); }
.int-shot { margin-top: auto; padding-top: 20px; }
.int-shot-t { font: 600 15px/1.35 var(--font-display); color: var(--ink); }
.int-key { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 12px; padding: 9px 11px; border-radius: 10px; background: var(--v2-card); }
.int-key b { font: 600 13px/1.4 var(--font-display); color: var(--ink); }
.int-key span { font: 400 13px/1.4 var(--font-body); color: #5b6076; letter-spacing: .01em; }
.int-key-note { margin: 8px 0 0 2px; font: 400 13px/1.45 var(--font-body); color: #5b6076; }
.int-dl { color: #002bb5; font-weight: 600; }
.int-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.int-btns b { padding: 8px 12px; border-radius: 8px; background: var(--blue); color: #fff; font: 600 13px/1.3 var(--font-display); }
.int-btns span { padding: 8px 12px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px #7d8398; font: 600 13px/1.3 var(--font-display); color: var(--v2-body); }
/* the product's dropzone: a dashed 12px box with a spreadsheet glyph over its two lines */
.int-upload { display: grid; justify-items: center; gap: 6px; margin-top: 12px; padding: 20px 16px; border-radius: 12px; border: 2px dashed #8a94b5; background: #fff; text-align: center; }
.int-upload i { display: grid; place-items: center; color: var(--blue); }
.int-upload .icon { width: 26px; height: 26px; fill: none; }
.int-upload b { font: 600 14.5px/1.35 var(--font-display); color: var(--ink); }
.int-upload span { max-width: 40ch; font: 400 13px/1.4 var(--font-body); color: #5b6076; }
.int-foot { margin-top: 30px; max-width: 68ch; font: 400 15.5px/1.6 var(--font-body); color: #52586e; }
.int-foot a { color: #002bb5; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.int-foot a:hover { color: var(--ink); }

/* the quote sits closer to the band above it than the shared 116px, and it centres in the column the way it does on
   every other subpage */
.int-page .tq-section { padding: clamp(52px, 6vw, 76px) 0; }

/* ==========================================================================
   breakpoints
   ========================================================================== */
@media (max-width: 991px) {
  .int-run { grid-template-columns: 1fr; }
  .int-run-l { padding: 0 0 8px; font-size: 13px; }
  .int-pane { grid-template-columns: 1fr; }
  .int-pane > p { margin-top: 14px; max-width: none; }
  .int-pane-h h3 { flex-basis: auto; }
  .int-two { grid-template-columns: 1fr; }
  /* one panel per row now, so the 46ch measure would leave half of each panel empty */
  .int-panel > p { max-width: 66ch; }
}
@media (max-width: 767px) {
  .int-page .int-moment { max-width: none; }
  /* 13 + 18.2 + 13 = 44.2px, the touch convention, on the page's only control and its hardest viewport */
  .int-tile { padding: 13px 14px; font-size: 14px; }
  .int-pane-h h3 { font-size: 18px; }
  .int-screen-g { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .int-screen { padding: 16px 16px 18px; }
}
@media (max-width: 620px) {
  /* two tiles across truncates the tool name to one letter, so the grid goes to one column */
  .int-screen-g { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}
@media (max-width: 560px) {
  /* the one portrait sits on the source card's top-right shoulder, which is where the location line ends: lift it clear */
  .int-page .pp--tl { top: -38px; }
  .int-card { padding: 18px 16px 16px; }
  /* the price drops under the customer name. grid-area on .int-sale em fixes the column as well as the row, so this
     has to reset the whole area, not just the row, or the price stays inline in an implicit second column. */
  .int-sale { grid-template-columns: 1fr; }
  .int-sale em { grid-area: 3 / 1; align-self: start; margin-top: 4px; }
}