/* ============================================================
   flow-results.css — the flow's matched-creators search list.
   Composed over results-ui's center column: hides the trending
   marquee and styles the tappable .flow-rlist. Loaded LAST on
   every flow page (after flow.css / home-flow.css). Leaves the
   shared results-ui untouched, so non-flow pages keep trending.
   ============================================================ */

/* in the flow, the center is the matched list — not the marquee */
.ru--flowresults .ru__cover { display: none !important; }

/* the flow's own CTAs (the deck, the gate) carry the ask — results-ui's
   own "Book a call" / "View more creators" row is redundant here. */
.ru--flowresults .ru__ctas { display: none !important; }

/* no-heart flow (home Layouts B/C): the avatar-heart stage is omitted, so the
   emptycontinueb stage placeholder collapses — the results overlay sits right under the copy */
.hh[data-noheart] .hh__stage,
.hv-flow[data-noheart] .hh__stage { display: none; }

/* a V2/V3-styled hero (.hv) that ALSO runs the flow: top-align the content (V2/V3
   center it) so the matched-list / deck overlay has room below the heading, and
   give it the taller flow canvas. The .hv2/.hv3 signature styling is otherwise intact. */
.hv-flow {
  justify-content: flex-start;
  align-items: flex-start;
  /* Idle: natural content height — no empty gap below the marquees.
     min-height:0 cancels .hv base 800px; padding-bottom replaces .hv base 84px.
     Full canvas set by JS (.flow-active) once the film starts.
     NO transition here (removed 2026-09-03): canvas.mode:"fixed" (flow-core.js)
     pins min-height once, synchronously, before first paint — a transition on
     the property instead animated that first pin as a visible ~500ms grow from
     the idle 0 to the fixed canvas height every time the hero loaded, which is
     exactly the swinging-height bug "fixed" mode was built to eliminate (see
     flow/README.md's "The fixed canvas — why it exists"). */
  min-height: 0;
  padding-top: clamp(28px, 4vh, 56px);
  padding-bottom: clamp(24px, 3vh, 40px);
}
/* the flow overlays (.ru / deck / gate) sit above the hero's ambient layers
   (V3 spotlight z-index:0, marquees z-index:1) */
.hv-flow .ru { z-index: 4; }

/* ---- swap the two side panels in the flow dashboard ------------------------
   Creator Team Delivery on the LEFT, Estimated Results on the RIGHT (center
   column stays put). The grid is symmetric (360px | 1fr | 360px) so this is a
   pure reorder — no column changes, and class-based styling stays attached to
   its own panel (only the position moves). Overrides results-ui's DOM order
   without forking it. */
.ru--flowresults .ru__side--right { order: 1; }  /* Creator Team Delivery → left  */
.ru--flowresults .ru__center      { order: 2; }
.ru--flowresults .ru__side--left  { order: 3; }  /* Estimated Results     → right */

/* top-align the three columns in the flow dashboard. results-ui's base grid
   centers the side panels against the taller center column (Figma coverflow);
   in the flow the center column is a tall results list, so centering leaves the
   side cards floating mid-height. Anchor all three to a common top edge. */
.ru--flowresults .ru__grid { align-items: start; }

/* NOTE: results-ui's own ≤1080 stacking breakpoint is neutralized inside the
   flow (flow.css's no-reflow lock — the dashboard never restacks; flow-core.js
   scales the whole 3-column grid down instead), so there is no narrow-width
   order to reset here any more. The .order swap above stays a plain 3-column
   reorder at every width. */

/* ---- Full canvas once the film/interaction starts (toggled by JS) ----------
   The overlay (.ru / deck / gate) use position:absolute; bottom:0, so the
   section must be tall enough for them. JS adds .flow-active on first startReel
   and never removes it — no jarring collapse on reset. */
.hv-flow.flow-active,
.hh[data-noheart].flow-active {
  /* Section height is driven by flow-core's fitFlowHeight() (JS): dashboard-height
     during results, full-card-height during the profile step, cleared at idle. A
     single CSS value can't fit all three phases without a big gap below the shorter
     ones, so the class is a state marker only. transition: min-height animates it. */
  min-height: 0;
}

/* ---- flow regions start BELOW the persistent copy (home Layouts B/C — both
   flow heroes carry data-noheart) ----------------------------------------- */
.hh[data-noheart] .ru,
.hv-flow[data-noheart] .ru,
.hh[data-noheart] .sd-stage,
.hv-flow[data-noheart] .sd-stage,
.hh[data-noheart] .flow-glow,
.hv-flow[data-noheart] .flow-glow {
  top: var(--ru-top, 360px);
}

.flow-rlist {
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: clamp(430px, 54vh, 580px);
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 4px;
  -webkit-mask-image: linear-gradient(180deg, #000 92%, transparent);
          mask-image: linear-gradient(180deg, #000 92%, transparent);
}
.flow-rlist::-webkit-scrollbar { display: none; }

/* the card reuses .ru__creator visuals; this adds the button reset + tap affordance */
.flow-rcard {
  width: 100%;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: transform .18s ease, box-shadow .18s ease;
}
.flow-rcard:hover {
  transform: translateY(-2px);
  /* clip-safe: full-width cards in the overflow-y:auto .flow-rlist (overflow-x
     is forced to clip too), so the hover shadow must stay vertical or it gets
     sliced flat on the sides. Negative spread keeps horizontal reach ~8px. */
  box-shadow: 0 2px 6px rgba(17, 17, 17, 0.05), 0 14px 24px -16px rgba(17, 17, 17, 0.18);
}
.flow-rcard:focus-visible {
  outline: 2px solid #0b0b0b;
  outline-offset: 2px;
}
.flow-rcard__chev {
  margin-left: auto;
  font-size: 24px;
  line-height: 1;
  color: #c9c9d2;
  flex: none;
}

/* gradient/mono avatar (mirrors the deck's creator avatar) */
.ru__avatar--mono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .02em;
}

@media (prefers-reduced-motion: reduce) {
  .flow-rcard { transition: none; }
  .flow-rcard:hover { transform: none; }
}

/* Centre the sign-up gate over the FLOW REGION on no-heart layouts. The flow
   region runs from --ru-top (below the persistent copy) to the section bottom,
   so centring on the whole section would float the panel up into the heading.

   Done by INSET, not by a translate. flow.css gives the panel `inset:0;
   margin:auto; height:fit-content`; re-anchoring `top` to --ru-top here makes
   margin:auto centre it inside the flow region vertically and inside the
   section horizontally. The old rule here combined a translate(-50%,-50%) with
   that margin:auto and double-centred the panel — 280px left of centre at
   1440. It also handed GSAP a transform to clobber: flow-core animates `y` on
   this element, so any translate here is load-bearing and fragile. Keep it
   transform-free. */
.hv-flow[data-noheart] .flow-gate {
  top: var(--ru-top, 360px);
  bottom: 0;
  transform: none;
}