/* ============================================================
   HiveMind Landing Page — §4 Everything's Connected (HM-497 / LP-16)
   Re-introduces HiveMind after the Problem fold and SHOWS the mechanism
   as a system: your sources converge into one vault (three real layers),
   which every teammate's Claude reads. Engineered/restrained register —
   the mono "database texture" is earned here (real connector names +
   vault paths + provenance). Connectors draw on scroll (connected.js);
   content is fully visible by default (no-JS / reduced-motion show all).
   ============================================================ */

.connected__inner {
  max-width: 64rem;
  margin-inline: auto;
}

/* ---- Intro ---- */
.connected__title {
  /* base h2 (Inter 800, --fs-h2, balance, display tracking) */
  max-width: 22ch;
  margin-bottom: var(--space-lg);
}

.connected__lead {
  font-size: var(--fs-h4);
  line-height: 1.4;
  color: var(--muted-dark);
  max-width: 54ch;
  margin-bottom: var(--space-4xl);
}

/* ---- The diagram ---- */
.connected__diagram {
  position: relative;              /* anchor for the SVG flow overlay */
  margin: 0;
  display: grid;
  /* minmax(0, 1fr), NOT bare 1fr (= minmax(auto, 1fr)): the vault's
     non-wrapping mono lines have a ~313px min-content that would blow the
     track past a 320px viewport (page-level h-scroll). Clamped to 0, the
     vault's own overflow-x:auto takes over and scrolls internally (HM-449). */
  grid-template-columns: minmax(0, 1fr);  /* mobile: stack sources / vault / claude */
  gap: var(--space-2xl);
}

.connected__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.connected__col-label {
  font-weight: 500;
  color: var(--hive-300);          /* sage — the section's signal colour */
}

.connected__nodes {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  align-items: flex-start;
}

/* Source / Claude chips — mono, the "database texture". */
.connected__node {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1;
  color: var(--offwhite);
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  white-space: nowrap;
}

/* Freeform inputs (notes/SOPs) read as "yours", not a pulled connector. */
.connected__node--soft {
  border-style: dashed;
  color: var(--muted-dark);
}

/* The vault — a dark, code-like artifact (the concrete centre of the system). */
.connected__vault {
  background: var(--ink-2);
  border: 1px solid var(--line-dark);
  border-radius: 12px;
  padding: var(--space-lg);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 2;
  overflow-x: auto;                /* long lines scroll inside the panel, not the page */
}

.connected__vault-path {
  color: var(--offwhite);
  margin-bottom: var(--space-xs);
}

.connected__tree {
  margin: 0;
}

.connected__tree li {
  color: var(--offwhite);
  white-space: nowrap;
}

.connected__branch { color: var(--muted-dark); }
.connected__dir { color: var(--hive-300); }        /* sage: the three real layers */
.connected__note { color: var(--muted-dark); margin-left: 0.9em; }
.connected__note em { font-style: normal; color: var(--hive-300); }   /* the LLM-optimisation point */

/* ---- Caption ---- */
.connected__caption {
  margin-top: var(--space-2xl);
  max-width: 60ch;
  color: var(--muted-dark);
}

/* ---- Mobile demonstration: Claude reading the vault (mobile-only) ----
   On desktop the scrub diagram carries §4, so the window is hidden. On mobile it
   replaces the "Read by Claude" chips: a faux-Claude window that types an
   Acme-specific answer, demonstrating vault context. Full answer is in the HTML
   (visible by default); connected.js types it on scroll-in. */
.connected__claude {
  display: none;                        /* shown only in the mobile block below */
  width: 100%;
  text-align: left;
  background: var(--ink-3);
  border: 1px solid var(--line-dark);
  border-radius: 12px;
  overflow: hidden;
}
.connected__claude-bar {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--line-dark);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--muted-dark);
}
.connected__claude-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--hive-500);          /* teal = fill/data (not text) */
  flex: none;
}
.connected__msg {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.45;
}
/* The prompt is a chat bubble on the right, like a real conversation. */
.connected__msg--user {
  align-self: flex-end;
  max-width: 82%;
  margin: 0.7rem 0.75rem 0.15rem;
  padding: 0.4rem 0.7rem;
  background: var(--ink-2);
  border: 1px solid var(--line-dark);
  border-radius: 13px 13px 4px 13px;   /* tail on the bottom-right — the "you" side */
  color: var(--offwhite);
}
/* Claude's answer sits left, full-width, like the assistant response. */
.connected__msg--bot {
  align-self: flex-start;
  max-width: 94%;
  margin: 0.2rem 0.85rem 0.85rem;
  color: var(--offwhite);
  min-height: 3.8em;                    /* reserve typing space so nothing jumps */
}
/* Caret while Claude "types" (JS toggles .is-typing). */
.connected__typed.is-typing::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 0.95em;
  margin-left: 1px;
  vertical-align: -0.12em;
  background: var(--hive-300);
  animation: connected-caret 1s steps(2) infinite;
}
@keyframes connected-caret { 50% { opacity: 0; } }

/* ---- The flow connectors (SVG overlay, desktop, built by JS) ---- */
.connected__flow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}

/* Content sits above the connectors. */
.connected__col { position: relative; z-index: 1; }

.connected__flow-line {
  fill: none;
  stroke: var(--hive-300);          /* fallback; JS sets a fade-to-sage gradient */
  stroke-width: 2;
  stroke-dasharray: var(--len);
  stroke-dashoffset: 0;            /* drawn by default; GSAP + ScrollTrigger scrub it */
}

/* The two hubs where the system converges / fans out — filled sage. */
.connected__flow-hub {
  fill: var(--hive-300);
}

/* ---- Desktop: three columns with room for the connectors ---- */
@media (min-width: 768px) {
  .connected__diagram {
    grid-template-columns: minmax(0, 0.85fr) minmax(20rem, 2fr) minmax(0, 0.85fr);
    align-items: stretch;            /* equal-height columns → labels level on one line */
    column-gap: clamp(2rem, 5vw, 4.5rem);
  }

  /* Label pinned to the top of each column (leveled); content centred on the vault
     midline (the 1fr content row). Shorter columns show a gap under their label. */
  .connected__col {
    display: grid;
    grid-template-rows: auto 1fr;
    align-items: center;
    row-gap: var(--space-md);
  }

  /* Chips hug the vault: sources flow in from the right, Claude out to the left. */
  .connected__col--sources { text-align: right; }
  .connected__col--sources .connected__nodes { align-items: flex-end; }
  .connected__col--claude .connected__nodes { align-items: flex-start; }

  /* Only the vault label centres over its panel. */
  .connected__col--vault .connected__col-label { text-align: center; }
}

/* ---- Below the 3-column breakpoint (phone + tablet): no horizontal connectors.
       Keep the stacked diagram as a tight, centred vertical flow so it reads as
       intentional at tablet widths instead of sprawling left with dead space;
       a hairline implies the handoff between groups. ---- */
@media (max-width: 767px) {
  .connected__flow { display: none; }

  /* Cap + centre the stacked diagram; centre each group's label and chips so the
     flow runs cleanly down the middle (the vault panel keeps its left-aligned
     code content). */
  .connected__diagram {
    max-width: 28rem;
    margin-inline: auto;
  }
  .connected__col-label { text-align: center; }
  .connected__nodes { align-items: center; }

  .connected__col--sources,
  .connected__col--vault { position: relative; }

  /* "Your sources" reads as a tab pulled in from the right edge — a panel with a
     sage handle on its right side, holding the source chips. It slides in from the
     right when the demo plays. */
  .connected__col--sources .connected__col-label { text-align: right; padding-right: 0.4rem; }
  .connected__col--sources .connected__nodes {
    align-items: flex-start;
    width: 84%;
    margin-left: auto;
    padding: 0.75rem 0.85rem;
    background: var(--ink-2);
    border: 1px solid var(--line-dark);
    border-right: none;
    border-radius: 12px 0 0 12px;   /* rounded left, flush to the right edge */
    position: relative;
  }
  .connected__col--sources .connected__nodes::before {
    content: "";
    position: absolute;
    right: -1px;
    top: 50%;
    width: 4px;
    height: 2.4rem;
    transform: translateY(-50%);
    background: var(--hive-300);     /* the tab handle */
    border-radius: 3px 0 0 3px;
  }

  /* A sage down-arrow between groups so the stack reads as one directed flow
     (sources -> vault -> Claude) instead of three disconnected lists. The
     single element draws stem + arrowhead via clip-path. */
  .connected__col--sources::after,
  .connected__col--vault::after {
    content: "";
    display: block;
    width: 16px;
    height: 30px;
    margin: var(--space-md) auto;
    background: var(--hive-300);
    clip-path: polygon(41% 0, 59% 0, 59% 55%, 100% 55%, 50% 100%, 0 55%, 41% 55%);
    opacity: 0.9;
  }

  /* §4 becomes a demonstration on mobile: the "Read by Claude" chips give way to a
     Claude window that reads the vault and writes Acme-specific output. */
  .connected__col--claude .connected__nodes { display: none; }
  .connected__claude { display: flex; flex-direction: column; }

  /* Play (added by connected.js on scroll-in, motion allowed): the sources tab
     arrives, wires draw, the vault glows as it receives, then Claude types. Pure
     enhancement — the static state (no .connected--play) is fully visible. */
  .connected--play .connected__col--sources .connected__nodes { animation: connected-tab-in 0.65s cubic-bezier(0.22, 1, 0.36, 1) both; }
  .connected--play .connected__col--sources::after,
  .connected--play .connected__col--vault::after { transform-origin: top center; }
  .connected--play .connected__col--sources::after { animation: connected-wire 0.4s ease-out 0.5s both; }
  .connected--play .connected__col--vault::after { animation: connected-wire 0.4s ease-out 1s both; }
  .connected--play .connected__vault { animation: connected-vault-recv 1.1s ease-out 0.7s both; }
}

@keyframes connected-tab-in {
  from { opacity: 0; transform: translateX(65%); }
  to { opacity: 1; transform: none; }
}
@keyframes connected-wire {
  from { opacity: 0; transform: scaleY(0); }
  to { opacity: 0.9; transform: none; }
}
@keyframes connected-vault-recv {
  0%, 100% { box-shadow: 0 0 0 0 rgba(91, 168, 154, 0); }
  45% { box-shadow: 0 0 0 1px rgba(91, 168, 154, 0.35), 0 0 24px rgba(91, 168, 154, 0.24); }
}

/* Reduced motion: no play animations (connected.js also skips the demo entirely and
   shows the full answer static). */
@media (prefers-reduced-motion: reduce) {
  .connected--play .connected__col--sources .connected__nodes,
  .connected--play .connected__col--sources::after,
  .connected--play .connected__col--vault::after,
  .connected--play .connected__vault { animation: none !important; }
}

/* No pre-reveal hidden state on mobile: the stacked flow + the Claude answer are
   always fully visible (a phone §4 is tall; arming it hidden reads as a gap). The
   demo animation is enhancement layered by connected.js; the desktop scrub is
   separate. */