/* =====================================================================
   Connector flow board — the animated "your stack → Datadrew MCP →
   Claude" diagram. Shared by /mcp (#how) and the homepage MCP section.
   Fixed 1120x656 composition, scaled to fit by mcp-flow.js; stacks
   below 960px.
   ===================================================================== */
.mcp-flow {
  max-width: 1126px;
  margin: 6px auto 46px;
  padding: 0 6px 6px 0;
  position: relative;
  overflow: hidden; /* no-JS guard: the fixed board must never widen the page */
}
.mcp-flow-board {
  position: relative;
  width: 1120px;
  height: 656px;
  background: var(--dark);
  border: var(--border-w) solid var(--dark);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transform-origin: top left;
}
.mcp-flow-board::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 2px, transparent 2px),
    linear-gradient(90deg, rgba(255,255,255,.05) 2px, transparent 2px);
  background-size: 64px 64px;
  pointer-events: none;
}
.mcp-flow-wires { position: absolute; inset: 0; width: 100%; height: 100%; }
.mcp-flow-wire { fill: none; stroke: rgba(255,255,255,.3); stroke-width: 2; stroke-dasharray: 6 7; }

.mcp-flow-collabel {
  position: absolute;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}

/* --- source category cards (left rail) --- */
.mcp-flow-cat {
  position: absolute;
  left: 24px;
  width: 268px;
  height: 96px;
  background: var(--white);
  border: 2px solid var(--dark);
  border-radius: 10px;
  padding: 9px 11px;
  transition: box-shadow .3s var(--ease), transform .3s var(--ease), opacity .3s var(--ease);
}
.mcp-flow-cat .mcp-flow-cat-tag {
  display: inline-block;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 2px 8px;
  background: var(--catbg);
  border: 2px solid var(--dark);
  border-radius: 100px;
}
.mcp-flow-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.mcp-flow-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 7px 2px 5px;
  background: var(--bg);
  border: 2px solid var(--dark);
  border-radius: 7px;
  white-space: nowrap;
}
.mcp-flow-chip img { display: block; }
.mcp-flow-cat.hot {
  box-shadow: 4px 4px 0 var(--cat);
  transform: translate(-2px, -2px);
}
.mcp-flow.is-live .mcp-flow-cat.dim { opacity: .5; }

/* --- centre hub (yellow) --- */
.mcp-flow-hub {
  position: absolute;
  left: 452px;
  top: 140px;
  width: 236px;
  height: 356px;
  background: var(--yellow);
  border: var(--border-w) solid var(--dark);
  border-radius: var(--radius);
  padding: 18px 16px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: box-shadow .25s var(--ease);
}
.mcp-flow-hub.flash { box-shadow: 0 0 0 4px rgba(250,204,21,.45); }
.mcp-flow-hub-badge {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--yellow);
  background: var(--dark);
  border-radius: 100px;
  padding: 4px 11px;
}
.mcp-flow-hub-logo { display: block; margin: 13px 0 9px; }
.mcp-flow-hub-name {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 900;
  letter-spacing: -.02em;
}
.mcp-flow-hub-url {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10.5px;
  background: var(--white);
  border: 2px solid var(--dark);
  border-radius: 7px;
  padding: 4px 10px;
  margin-top: 8px;
}
.mcp-flow-hub-caps {
  list-style: none;
  margin: 13px 0 0;
  padding: 12px 0 0;
  border-top: 2px dashed rgba(26,26,26,.35);
  width: 100%;
  text-align: left;
}
.mcp-flow-hub-caps li {
  position: relative;
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(26,26,26,.88);
  line-height: 1.45;
  padding-left: 15px;
  margin-bottom: 8px;
}
.mcp-flow-hub-caps li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 6px;
  height: 6px;
  background: var(--dark);
}
.mcp-flow-ticker {
  margin-top: auto;
  width: 100%;
  background: var(--dark);
  border-radius: 8px;
  padding: 8px 11px;
  text-align: left;
}
.mcp-flow-ticker em {
  display: block;
  font-style: normal;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
.mcp-flow-ticker code {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--yellow);
  margin-top: 3px;
  transition: opacity .2s var(--ease);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mcp-flow-ticker code.swap { opacity: 0; }
.mcp-flow-trust {
  position: absolute;
  left: 570px;
  top: 510px;
  transform: translateX(-50%);
  white-space: nowrap;
  padding-left: 16px;
  padding-right: 16px;
  text-align: center;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--white);
  border: 2px solid var(--dark);
  border-radius: 100px;
  padding: 6px 0;
}

/* --- Claude chat card (right rail) --- */
.mcp-flow-chat {
  position: absolute;
  left: 828px;
  top: 44px;
  width: 268px;
  height: 264px;
  background: var(--white);
  border: var(--border-w) solid var(--dark);
  border-radius: var(--radius);
  padding: 14px;
  display: flex;
  flex-direction: column;
}
.mcp-flow-chat-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 9px;
  border-bottom: 2px dashed rgba(26,26,26,.18);
}
.mcp-flow-chat-head b { display: block; font-size: 14.5px; font-weight: 800; line-height: 1.15; }
.mcp-flow-chat-head small { display: block; font-size: 9.5px; font-weight: 600; color: var(--text4); }
.mcp-flow-q {
  margin: 10px 0 0 26px;
  min-height: 36px;
  background: var(--bg);
  border: 2px solid var(--dark);
  border-radius: 10px 10px 3px 10px;
  padding: 7px 10px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.4;
  transition: opacity .22s var(--ease);
}
.mcp-flow-q.swap { opacity: 0; }
.mcp-flow-tool {
  margin-top: 9px;
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--text4);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: opacity .22s var(--ease);
}
.mcp-flow-tool b { color: var(--text2); font-weight: 500; }
.mcp-flow-tool.swap { opacity: 0; }
.mcp-flow-a { margin-top: 9px; transition: opacity .25s var(--ease), filter .25s var(--ease); }
.mcp-flow-a.pending { opacity: .25; filter: blur(2px); }
.mcp-flow-kpis { display: flex; gap: 6px; }
.mcp-flow-kpi {
  flex: 1;
  background: var(--bg);
  border: 2px solid var(--dark);
  border-radius: 8px;
  padding: 6px 9px;
  min-width: 0;
}
.mcp-flow-kpi small {
  display: block;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mcp-flow-kpi b { font-size: 15px; font-weight: 800; font-family: var(--display); font-variant-numeric: tabular-nums; }
/* Darker than the global --green-text/--red: these deltas are 9.5px on the
   cream chip, so they need >=4.5:1 (WCAG AA small-text). */
.mcp-flow-kpi .up { color: #166534; font-size: 9.5px; font-weight: 800; }
.mcp-flow-kpi .down { color: #B91C1C; font-size: 9.5px; font-weight: 800; }
.mcp-flow-rec { font-size: 10.5px; line-height: 1.5; color: var(--text2); margin: 8px 0 0; }
.mcp-flow-rec b { color: var(--text); }

/* --- live dashboard card --- */
.mcp-flow-dash {
  position: absolute;
  left: 828px;
  top: 342px;
  width: 268px;
  height: 180px;
  background: var(--white);
  border: var(--border-w) solid var(--dark);
  border-radius: var(--radius);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mcp-flow-dash-chrome { display: flex; align-items: center; gap: 5px; }
.mcp-flow-dash-chrome i {
  width: 9px;
  height: 9px;
  border: 2px solid var(--dark);
  border-radius: 50%;
  flex: 0 0 9px;
}
.mcp-flow-dash-chrome i:nth-child(1) { background: #FEE2E2; }
.mcp-flow-dash-chrome i:nth-child(2) { background: #FEF3C7; }
.mcp-flow-dash-chrome i:nth-child(3) { background: #D1FAE5; }
.mcp-flow-dash-chrome span {
  margin-left: 3px;
  font-size: 8.5px;
  font-weight: 700;
  background: var(--bg);
  border: 2px solid var(--dark);
  border-radius: 7px;
  padding: 2px 8px;
  white-space: nowrap;
}
.mcp-flow-dash-kpis { display: flex; gap: 6px; }
.mcp-flow-dash-kpis > div {
  flex: 1;
  border: 2px solid var(--dark);
  border-radius: 7px;
  padding: 4px 7px;
  min-width: 0;
}
.mcp-flow-dash-kpis small {
  display: block;
  font-size: 7.5px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text4);
}
.mcp-flow-dash-kpis b { font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.mcp-flow-bars {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  min-height: 40px;
}
.mcp-flow-bars i {
  flex: 1;
  height: var(--h, 50%);
  background: #DBEAFE;
  border: 2px solid var(--dark);
  border-bottom-width: 0;
  border-radius: 3px 3px 0 0;
  transition: height .6s var(--ease);
}
.mcp-flow-dash-foot {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text4);
}

/* --- clients strip + lane labels --- */
.mcp-flow-clients {
  position: absolute;
  left: 828px;
  top: 536px;
  width: 268px;
  border: 2px dashed rgba(255,255,255,.35);
  border-radius: 10px;
  padding: 8px 11px;
}
.mcp-flow-clients em {
  display: block;
  font-style: normal;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-bottom: 6px;
}
.mcp-flow-clients span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 700;
  background: var(--white);
  border: 2px solid var(--dark);
  border-radius: 7px;
  padding: 2px 7px 2px 5px;
  margin-right: 4px;
}
.mcp-flow-lane-label {
  position: absolute;
  z-index: 4;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  background: var(--white);
  border: 2px solid var(--dark);
  border-radius: 100px;
  padding: 4px 10px;
  white-space: nowrap;
}

/* --- responsive: scale handled by JS >960px; stack below (below ~960 the
       scaled type drops under legibility, so we stack earlier than 768) --- */
@media (max-width: 960px) {
  .mcp-flow { margin-bottom: 36px; padding: 0; }
  .mcp-flow-board {
    width: auto;
    height: auto;
    transform: none !important;
    padding: 18px 14px;
  }
  .mcp-flow-wires, .mcp-flow-lane-label { display: none; }
  .mcp-flow-collabel { position: static; display: block; padding: 0 0 10px; text-align: center; }
  /* the "AI client" label has no adjacent card in the stacked order — hide it
     (double class beats the display:block reset above) */
  .mcp-flow-collabel.mcp-flow-collabel-ai { display: none; }
  .mcp-flow-collabel[style] { left: auto !important; top: auto !important; }
  .mcp-flow-cat, .mcp-flow-hub, .mcp-flow-trust, .mcp-flow-chat, .mcp-flow-dash, .mcp-flow-clients {
    position: static;
    width: auto;
    height: auto;
  }
  .mcp-flow-cat, .mcp-flow-chat, .mcp-flow-dash, .mcp-flow-clients {
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
  }
  .mcp-flow-cat { margin-bottom: 10px; }
  .mcp-flow-cat.hot { transform: none; box-shadow: 3px 3px 0 var(--cat); }
  .mcp-flow.is-live .mcp-flow-cat.dim { opacity: 1; }
  .mcp-flow-hub { margin: 22px auto 12px; max-width: 320px; }
  .mcp-flow-ticker { margin-top: 14px; }
  .mcp-flow-trust { margin: 0 auto 22px; max-width: 320px; transform: none; white-space: normal; }
  .mcp-flow-chat { margin-bottom: 12px; }
  .mcp-flow-dash { margin-bottom: 12px; }
  /* bars use % heights — give them a definite basis now that the card is auto-height */
  .mcp-flow-bars { height: 56px; flex: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mcp-flow-dots, .mcp-flow-pulses { display: none; }
  .mcp-flow-bars i { transition: none; }
  .mcp-flow-cat, .mcp-flow-hub { transition: none; }
}