/* Integrations page: every integration, filtered by type
   (page-integrations.php, template-parts/integrations/integrations.php).
   The hero, the sticky type bar and the section header rows reuse the Product page's
   styles (product-workflows.css: .pw-hero, .pw-bar, .pw-group); the crop marks come
   from workflows.css (.wfu-crop). Driven by assets/js/integrations-page.js. */

/* ---------- the grid: logo tiles divided by the site's hairlines ---------- */
/* each tile draws its right and bottom line; the grid sits 1px over the frame's
   right edge and the section's bottom so those lines land on the frame's own */
.ig-grid{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); margin:0 -1px -1px 0; padding:0; list-style:none; }
.ig-tile{ position:relative; display:flex; flex-direction:column; gap:14px; min-width:0; margin:0;
  padding:18px 18px 20px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg); }

/* the logo box: square-ish, the faint graph grid fades in behind the logo on hover */
.ig-fig{ position:relative; display:grid; place-items:center; aspect-ratio:1.45; background:#f2f3f5; }
.ig-fig::before{ content:""; position:absolute; inset:0; background-image:var(--grid); background-size:24px 24px; background-position:-1px -1px;
  opacity:0; transition:opacity .35s ease; pointer-events:none; }
.ig-fig img{ position:relative; z-index:1; display:block; width:auto; height:auto; max-width:36%; max-height:40%; object-fit:contain;
  transition:transform .45s cubic-bezier(.2,.8,.2,1); }
/* wordmark logos: a wider, shorter box so they read at the same weight as the symbols */
.ig-tile--wide .ig-fig img{ max-width:54%; max-height:24%; }
/* no logo file yet: the name stands in, in grey, until a logo is added (template-parts/integrations/tile.php) */
.ig-word{ position:relative; z-index:1; max-width:80%; text-align:center; font-family:var(--display); font-weight:500; font-size:clamp(13px,1.05vw,16px); line-height:1.15; color:#8a8a96; text-wrap:balance; transition:transform .45s cubic-bezier(.2,.8,.2,1); }
.ig-tile:hover .ig-word{ transform:scale(1.08); }

/* crop marks: hidden until you hover, then they close in (as on the workflow cards) */
.ig-fig .wfu-crop i{ opacity:0; transition:opacity .25s ease, transform .4s cubic-bezier(.2,.8,.2,1); }
.ig-fig .wfu-crop i:nth-child(1){ transform:translate(-4px,-4px); }
.ig-fig .wfu-crop i:nth-child(2){ transform:translate(4px,-4px); }
.ig-fig .wfu-crop i:nth-child(3){ transform:translate(-4px,4px); }
.ig-fig .wfu-crop i:nth-child(4){ transform:translate(4px,4px); }
.ig-tile:hover .ig-fig::before{ opacity:1; }
.ig-tile:hover .ig-fig .wfu-crop i{ opacity:1; transform:none; }
.ig-tile:hover .ig-fig img{ transform:scale(1.08); }

/* the name: a link to the integration's page that covers the whole tile */
.ig-name{ font-size:14px; line-height:1.3; color:var(--ink); text-decoration:none; transition:color .2s ease; }
.ig-name::after{ content:""; position:absolute; inset:0; z-index:3; }
.ig-name:focus-visible{ outline:none; }
.ig-tile:has(.ig-name:focus-visible){ outline:2px solid var(--blue); outline-offset:-2px; }
.ig-tile:hover .ig-name{ color:var(--blue); }

/* section header: no Control/Intelligence label here, so the title starts the row */
.ig .pw-group-h{ align-items:center; }

/* filtering: the tiles that stay fade up in turn */
.ig-tile.is-in{ animation:pw-in .45s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(var(--i,0) * 25ms); }

/* ---------- an integration's own page (template-parts/integrations/single.php) ----------
   The header is laid out as the About page rows: 50 / 50, text on the left, the product graphic on the right
   on the graph grid, the app window running off the right and bottom edges. */
.igs-row{ position:relative; display:grid; grid-template-columns:50% 50%; container-type:inline-size; --pad:clamp(24px,3.2vw,48px); }
.igs-txt{ min-width:0; padding:var(--pad); display:flex; flex-direction:column; justify-content:center; min-height:clamp(440px,42vw,580px); border-right:1px solid var(--line); }
.igs-txt > *{ width:calc(44cqw - var(--pad) * 2); flex:none; }
.igs-tag{ margin-bottom:clamp(24px,2.6vw,36px); }
.igs-tag .tag-t{ color:var(--blue); }
.igs-tag a{ color:inherit; text-decoration:none; transition:color .2s ease; }
.igs-tag a:hover{ color:var(--ink); }
.igs-h{ margin:0; font-family:var(--display); font-weight:500; font-size:clamp(34px,4vw,58px); line-height:1.05; letter-spacing:0; text-wrap:balance; }
.igs-b{ margin:clamp(18px,1.8vw,26px) 0 0; color:var(--muted); font-size:clamp(15px,1.15vw,17px); line-height:1.6; text-wrap:pretty; }

.igs-fig{ position:relative; min-width:0; overflow:hidden; background-color:#f4f5f7; background-image:var(--grid); background-size:var(--grid-size); background-position:-1px -1px; }

/* the app window: same look as the About page graphics, larger; runs off the right and bottom */
.igs-app{ position:absolute; left:16%; top:15%; width:calc(84% + 56px); min-height:110%; overflow:hidden; background:#fcfcfd; border-radius:8px;
  box-shadow:0 1px 2px rgba(0,0,0,.05),0 14px 40px rgba(0,0,0,.08); font-family:var(--sans); color:#101012; font-size:14px;
  transform-origin:0 0; transition:transform .6s cubic-bezier(.33,1,.68,1); -webkit-font-smoothing:antialiased; }
.igs-fig:hover .igs-app{ transform:translate(-6px,-6px) scale(1.025); }
.igs-app em{ font-style:normal; }
/* top bar: breadcrumb and status */
.igs-app-top{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 76px 14px 20px; border-bottom:1px solid #e6e6e6; background:#fff; }
.igs-app-crumb{ display:inline-flex; align-items:center; gap:8px; min-width:0; white-space:nowrap; font:11.5px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:#6b6b78; }
.igs-app-crumb svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.igs-app-crumb i{ font-style:normal; color:#c4c4cc; }
.igs-app-crumb b{ font-weight:400; color:#101012; }
.igs-app-st{ flex:none; display:inline-flex; align-items:center; gap:7px; height:26px; padding:1px 10px 0; border:1px solid #e6e6e6; border-radius:4px;
  font:12px/1 var(--mono); color:#6b6b78; background:#f9f9f9; transition:background .3s ease, border-color .3s ease, color .3s ease; }
.igs-app-st > i{ width:7px; height:7px; border-radius:50%; background:var(--blue); animation:igs-blink 1s ease-in-out infinite; }
.igs-app-st .s-ok{ display:none; }
.igs-app.is-ok .igs-app-st{ background:#e9f7ef; border-color:#bfe6cf; color:#11733b; }
.igs-app.is-ok .igs-app-st > i{ background:#1a9a52; animation:none; }
.igs-app.is-ok .igs-app-st .s-run{ display:none; }
.igs-app.is-ok .igs-app-st .s-ok{ display:inline; }
@keyframes igs-blink{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }

.igs-app-body{ padding:18px 76px 24px 20px; }
/* the integration: logo, name, Settings */
.igs-app-head{ display:flex; align-items:center; gap:14px; padding:16px; background:#fff; border:1px solid #e6e6e6; border-radius:6px; }
.igs-app-logo{ flex:none; display:grid; place-items:center; width:56px; height:56px; background:#f9f9f9; border:1px solid #e6e6e6; border-radius:6px; }
.igs-app-logo img{ display:block; max-width:62%; max-height:62%; width:auto; height:auto; object-fit:contain; }
.igs-app-logo.is-wide img{ max-width:88%; max-height:44%; }
/* no logo file yet: its first letter */
.igs-app-ini{ font-family:var(--display); font-weight:500; font-size:24px; line-height:1; color:#6b6b78; }
.igs-app-name{ flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.igs-app-name b{ font-weight:500; font-size:18px; letter-spacing:-.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.igs-app-name span{ font:11.5px/1 var(--mono); color:#6b6b78; }
/* clickable: the slight grey box, as in the app */
.igs-app-btn{ flex:none; padding:8px 12px 7px; border:1px solid #d6d6d6; border-radius:4px; background:#f4f4f4; font-size:13px; font-weight:500; }

/* the figures */
.igs-app-stats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:10px; background:#fff; border:1px solid #e6e6e6; border-radius:6px; }
.igs-app-stats > span{ display:flex; flex-direction:column; gap:8px; padding:14px 16px 16px; }
.igs-app-stats > span + span{ border-left:1px solid #e6e6e6; }
.igs-app-stats em{ font:11px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:#6b6b78; }
.igs-app-stats b{ font-weight:500; font-size:24px; line-height:1; letter-spacing:-.4px; font-variant-numeric:tabular-nums; }
.igs-app-stats .igs-app-sync{ font-size:18px; line-height:24px; margin-top:-2px; }

/* Auto-sync, with the toggle (on when connected) */
.igs-app-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:10px; padding:14px 16px; background:#fff; border:1px solid #e6e6e6; border-radius:6px; font-weight:500; }
.igs-app-row > span:first-child{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.igs-app-row em{ font:400 11.5px/1.3 var(--mono); color:#6b6b78; }
.igs-app-tog{ flex:none; position:relative; width:34px; height:20px; border-radius:10px; background:#d6d6d6; transition:background .3s ease; }
.igs-app-tog i{ position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 2px #00000033; transition:transform .3s ease; }
.igs-app.is-ok .igs-app-tog{ background:var(--blue); }
.igs-app.is-ok .igs-app-tog i{ transform:translateX(14px); }

/* activity: each line fades in as it connects */
.igs-app-log{ margin-top:18px; }
.igs-app-k{ display:block; margin-bottom:8px; font:11px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:#6b6b78; }
.igs-app-log ul{ margin:0; padding:0; list-style:none; }
.igs-app-log li{ display:flex; align-items:center; gap:10px; padding:11px 2px; border-top:1px solid #e6e6e6; font-size:13.5px; }
.igs-app-log li i{ flex:none; width:6px; height:6px; border-radius:50%; background:var(--blue); }
.igs-app-log li span{ flex:1; min-width:0; }
.igs-app-log li em{ font:11px/1 var(--mono); color:#9b9baa; }
.igs-app.is-js .igs-app-log li{ opacity:0; transform:translateY(6px); transition:opacity .4s ease, transform .5s cubic-bezier(.2,.8,.2,1); }
.igs-app.is-js .igs-app-log li.is-on{ opacity:1; transform:none; }

/* ---------- Integrations page: Don't see yours? We'll build it. (template-parts/integrations/custom.php) ----------
   Same layout and app window as an integration's page header; the form fills in when it scrolls into view. */
.igc-btns{ margin-top:clamp(28px,3vw,40px); }
/* the form is taller than an integration page's card: start it higher and keep it compact so the button sits clear of the bottom edge */
.igs-app.igc-app{ top:9%; }
.igc-app .igs-app-body{ padding-top:14px; padding-bottom:40px; }
.igc-app .igs-app-head{ padding:12px 14px; }
.igc-app .igs-app-logo{ width:48px; height:48px; }
.igc .igs-txt{ min-height:clamp(560px,44vw,620px); }
.igc-logo{ border-style:dashed; border-color:#c4c4cc; color:#9b9baa; transition:background .3s ease, border-color .3s ease, color .3s ease; }
.igc-logo svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.igc-tick{ display:none; }
.igc-app.is-ok .igc-logo{ border-style:solid; border-color:var(--blue); background:var(--blue); color:#fff; }
.igc-app.is-ok .igc-plus{ display:none; }
.igc-app.is-ok .igc-tick{ display:block; }
.igc-fields{ display:grid; gap:8px; margin-top:10px; }
.igc-field{ display:flex; flex-direction:column; gap:6px; }
.igc-field em{ font:11px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:#6b6b78; }
.igc-input{ display:flex; align-items:center; height:38px; padding:0 14px; background:#fff; border:1px solid #e6e6e6; border-radius:6px; font-size:14px; white-space:nowrap; overflow:hidden; transition:border-color .2s ease, box-shadow .2s ease; }
.igc-field.is-typing .igc-input{ border-color:var(--blue); box-shadow:0 0 0 3px #edf1ff; }
.igc-caret{ display:none; width:1.5px; height:17px; margin-left:1px; background:var(--blue); animation:igs-blink .9s steps(1) infinite; }
.igc-field.is-typing .igc-caret{ display:block; }
/* Build connector: the app's primary button, then the dots while it builds, then "Connector live" */
.igc-build{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-width:170px; height:40px; margin-top:14px; padding:0 18px;
  border-radius:6px; background:var(--blue); color:#fff; font-size:14px; font-weight:500; transition:transform .15s ease, background .3s ease; }
.igc-build .s-busy,.igc-build .s-done{ display:none; }
.igc-build .s-busy i{ width:6px; height:6px; border-radius:50%; background:#fff; animation:igs-blink 1s ease-in-out infinite; }
.igc-build .s-busy i:nth-child(2){ animation-delay:.15s; }
.igc-build .s-busy i:nth-child(3){ animation-delay:.3s; }
.igc-app.is-press .igc-build{ transform:scale(.96); }
.igc-app.is-busy .igc-build .s-go{ display:none; }
.igc-app.is-busy .igc-build .s-busy{ display:inline-flex; gap:5px; }
.igc-app.is-ok .igc-build{ background:#101012; }
.igc-app.is-ok .igc-build .s-go,.igc-app.is-ok .igc-build .s-busy{ display:none; }
.igc-app.is-ok .igc-build .s-done{ display:inline; }
/* "Draft" status before it's built: grey dot, no blink */
.igc-app .igs-app-st > i{ background:#9b9baa; animation:none; }
.igc-app.is-busy .igs-app-st > i{ background:var(--blue); animation:igs-blink 1s ease-in-out infinite; }
.igc-app.is-ok .igs-app-st > i{ background:#1a9a52; animation:none; }
@media (max-width:860px){
  .igc-btns{ margin-top:24px; }
  .igc .igs-txt{ min-height:0; }
  .igc .igs-fig{ aspect-ratio:auto; height:540px; }
  .igc-input{ height:36px; font-size:13px; }
  .igc-build{ height:36px; font-size:13px; }
}

/* More integrations: "View all" on the right of the header row */
.igs-all{ margin-left:auto; color:var(--muted); text-decoration:none; transition:color .2s ease; }
.igs-all:hover{ color:var(--blue); }

@media (max-width:860px){
  .igs-row{ grid-template-columns:1fr; }
  .igs-txt{ border-right:0; min-height:0; padding:clamp(48px,10vw,72px) var(--gut); }
  .igs-txt > *{ width:auto; }
  .igs-fig{ aspect-ratio:4/3.4; border-top:1px solid var(--line); }
  .igs-app{ left:7%; top:9%; width:calc(93% + 40px); font-size:13px; }
  .igs-app-top{ padding:12px 54px 12px 14px; }
  .igs-app-body{ padding:14px 54px 20px 14px; }
  .igs-app-head{ padding:12px; gap:10px; }
  .igs-app-logo{ width:44px; height:44px; }
  .igs-app-name b{ font-size:15px; }
  .igs-app-stats > span{ padding:12px 10px 12px; }
  .igs-app-stats b{ font-size:19px; }
  .igs-app-stats .igs-app-sync{ font-size:14px; line-height:19px; }
  .igs-fig:hover .igs-app{ transform:none; }
}
@media (prefers-reduced-motion:reduce){ .igs-app-st > i{ animation:none; } .igs-app,.igs-app-log li{ transition:none !important; } }

/* ---------- smaller screens ---------- */
@media (max-width:1100px){ .ig-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:720px){ .ig-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:520px){
  .ig-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ig-tile{ padding:14px 14px 16px; gap:10px; }
}
@media (prefers-reduced-motion:reduce){
  .ig-tile.is-in{ animation:none; }
  .ig-fig img,.ig-fig .wfu-crop i{ transition:none; }
}