/* connect_hub.css - restyle pass for the pre-redesign "Connect" hub
   (templates/connect.html, integrations.html, integration_platform.html),
   SEAT-RULES-FIDELITY 2026-09-24 seat f5-setup. These three pages keep
   their existing routes/behaviour (owner order 2026-09-02: every channel
   stays its own unfolded card, no <details> fold) - this file only makes
   them match the same --am-* design-system tokens the new /setup flow
   uses, and gives the ONE recommended path (/setup) its own highlighted
   card so it reads as the main door, not one option among equals. */

.connect-hub .hero h1 { color: var(--am-ink); }
.connect-hub .reassurance-strip {
  background: #EAF6F1;
  border-color: #CDE8DF;
  color: var(--am-ok);
}

.connect-hub-primary {
  margin: 32px auto 8px;
  max-width: 560px;
  background: linear-gradient(0deg, #FFF8ED, #FFF8ED), var(--am-card);
  border: 1px solid #F3D9A8;
  border-radius: var(--am-radius);
  padding: 24px;
  text-align: center;
}
.connect-hub-primary-tag {
  display: inline-flex;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(14, 125, 107, .12);
  color: var(--am-ok);
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 10px;
}
.connect-hub-primary h2 { margin: 0 0 8px; font-size: 20px; color: var(--am-ink); }
.connect-hub-primary p { margin: 0 0 16px; color: var(--muted, #64748b); }
.connect-hub-primary .button {
  background: var(--am-primary);
  margin: 0 auto;
}
.connect-hub-primary .button:hover { background: #c67c1c; }

.connect-hub-secondary-label {
  text-align: center;
  color: var(--muted, #64748b);
  font-size: 13px;
  font-weight: 600;
  margin: 30px 0 -6px;
}

.connect-hub .channel-row { border-color: var(--am-border); }
.connect-hub .active-pill { background: var(--am-ok); }

/* ---- integrations.html / integration_platform.html ---------------- */
.integrations-hub-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 16px 0 24px;
  padding: 14px 18px;
  border-radius: var(--am-radius);
  background: linear-gradient(0deg, #FFF8ED, #FFF8ED), var(--am-card);
  border: 1px solid #F3D9A8;
  color: var(--am-ink);
  font-weight: 600;
  font-size: 13.5px;
  text-decoration: none;
}
.integrations-hub-banner:hover { border-color: var(--am-primary); }
.integrations-hub-banner span[aria-hidden] { color: var(--am-primary); flex: 0 0 auto; }

.integrations-hub .scope-strip {
  margin: 0 0 16px;
  padding: 10px 14px;
  border-radius: var(--am-radius);
  background: var(--am-bg);
  border: 1px solid var(--am-border);
  font-size: 13.5px;
}
.integrations-hub .integration-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.integrations-hub .integration-card {
  background: var(--am-card);
  border: 1px solid var(--am-border);
  border-radius: var(--am-radius);
  padding: 18px;
}
.integrations-hub .integration-card .button { background: var(--am-primary); }
.integrations-hub .integration-card .button:hover { background: #c67c1c; }

@media (max-width: 480px) {
  .connect-hub-primary { margin-top: 20px; padding: 18px; }
  .integrations-hub-banner { flex-direction: column; align-items: flex-start; }
}