/*
 * Rep Firm Workflow Guide — /guides/rep-firm-workflows
 * Editorial reimagining of the repworkflows.com map.
 * The workflow map is the one cinematic moment (see js/rep-firm-workflows.js).
 * Progressive enhancement: server-rendered nodes are fully visible by default;
 * scroll choreography only engages when JS runs and motion is allowed.
 */

.rep-workflows main {
  max-width: 1140px;
}

/* Constrain prose to a comfortable measure while the map breaks wider */
.rep-workflows .dek,
.rep-workflows .wf-section__sub,
.rep-workflows .faq-answer p,
.rep-workflows main > article > ul {
  max-width: 68ch;
}

/* ───────────────────────── Hero ───────────────────────── */
.wf-hero {
  margin: 0 0 var(--space-row-gap);
}

.wf-hero__eyebrow {
  font-family: var(--font-primary);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--bv-blue-400);
  margin: 0 0 12px;
}

.wf-hero__title {
  font-family: var(--font-display);
  font-size: var(--text-display);
  line-height: var(--leading-tight);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  max-width: 18ch;
}

.wf-hero__line {
  display: block;
}

.wf-hero__line--accent {
  color: var(--bv-blue-400);
}

.rep-workflows .wf-hero .dek {
  margin-bottom: 14px;
}

/* Stats row */
.wf-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 28px 0 0;
}

.wf-stat {
  flex: 1 1 120px;
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-card);
  padding: 16px 18px;
  box-shadow: var(--shadow-card);
}

.wf-stat dt {
  order: 2;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--neutral-400);
  letter-spacing: 0.01em;
}

.wf-stat dd {
  order: 1;
  margin: 0 0 2px;
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: var(--weight-semibold);
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ───────────────────────── Sections ───────────────────────── */
.wf-section {
  margin: var(--space-row-gap) 0 0;
}

.wf-section__sub {
  font-size: var(--text-body-lg);
  color: var(--neutral-700);
  margin: 0 0 24px;
}

/* ───────────────────────── Phase rail ───────────────────────── */
.wf-rail {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 8px;
}

.wf-rail__phase {
  position: relative;
  border: 1px solid var(--neutral-200);
  border-radius: 12px;
  padding: 14px 8px 12px;
  background: #fff;
  text-align: center;
  overflow: hidden;
}

.wf-rail__phase::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--bv-blue-400);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease-spring);
}

.wf-rail__phase.is-active::before {
  transform: scaleX(1);
}

.wf-rail__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: var(--weight-bold);
  color: var(--bv-blue-400);
  background: var(--bv-blue-100);
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}

.wf-rail__label {
  display: block;
  font-size: 12.5px;
  font-weight: var(--weight-bold);
  color: var(--ink);
  line-height: 1.25;
}

.wf-rail__expand {
  display: block;
  font-size: 11px;
  color: var(--neutral-400);
  margin-top: 2px;
}

@media (max-width: 860px) {
  .wf-rail { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 480px) {
  .wf-rail { grid-template-columns: repeat(2, 1fr); }
}

/* ───────────────────────── Role key ───────────────────────── */
.wf-rolekey {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 32px;
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-card);
  background: #fff;
  padding: 24px;
  box-shadow: var(--shadow-card);
}

.wf-rolekey__title {
  font-family: var(--font-primary);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--neutral-400);
  margin: 0 0 12px;
  font-weight: var(--weight-bold);
}

.wf-rolekey__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.wf-rolekey__list li {
  font-size: 12.5px;
  color: var(--neutral-700);
  background: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  margin: 0;
}

.wf-rolekey__list b {
  color: var(--ink);
  font-weight: var(--weight-bold);
}

.wf-rolekey__note {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--text-sm);
  color: var(--neutral-700);
}

@media (max-width: 680px) {
  .wf-rolekey { grid-template-columns: 1fr; }
}

/* ───────────────────────── The map ───────────────────────── */
.wf-section--map {
  /* break out a touch wider than prose for presence */
  margin-top: var(--space-row-gap);
}

.wf-map {
  position: relative;
  margin-top: 8px;
  padding-left: 40px;
}

/* Scroll progress bar pinned to the top of the map */
.wf-map__progress {
  position: sticky;
  top: calc(var(--header-height) + 8px);
  z-index: 3;
  height: 3px;
  margin: 0 0 28px -40px;
  border-radius: var(--radius-pill);
  background: var(--neutral-100);
  overflow: hidden;
}

.wf-map__progress-fill {
  display: block;
  height: 100%;
  width: var(--wf-progress, 0%);
  background: linear-gradient(90deg, var(--bv-blue-600), var(--bv-blue-400));
  border-radius: inherit;
}

/* Vertical timeline spine in the left gutter */
.wf-map__spine {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 13px;
  width: 2px;
  background: var(--neutral-200);
  border-radius: 2px;
  overflow: hidden;
}

.wf-map__spine-fill {
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--wf-spine, 100%);
  background: linear-gradient(180deg, var(--bv-blue-400), var(--bv-blue-600));
}

.wf-map__lanes {
  display: flex;
  flex-direction: column;
  gap: 44px;
}

/* ── Lane (stage) ── */
.wf-lane {
  position: relative;
}

.wf-lane__head {
  position: relative;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin: 0 0 18px;
}

.wf-lane__marker {
  position: absolute;
  left: -34px;
  top: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--neutral-200);
  box-shadow: 0 0 0 4px var(--neutral-50);
  transition: border-color 0.4s var(--ease-spring), transform 0.4s var(--ease-spring);
}

.wf-lane.is-active .wf-lane__marker {
  border-color: var(--bv-blue-400);
  transform: scale(1.15);
}

.wf-lane__title {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  margin: 0 0 4px;
  line-height: var(--leading-snug);
  color: var(--ink);
}

.wf-lane__blurb {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--neutral-700);
  max-width: 74ch;
}

/* ── Nodes ── */
.wf-lane__nodes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: 14px;
}

.wf-node {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-card);
  background: #fff;
  padding: 16px 16px 14px;
  box-shadow: var(--shadow-card);
  scroll-margin-top: calc(var(--header-height) + 24px);
  transition:
    transform 0.25s var(--ease-spring),
    box-shadow 0.25s var(--ease-spring),
    border-color 0.25s var(--ease-spring);
}

.wf-node:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
  border-color: color-mix(in srgb, var(--bv-blue-400) 35%, var(--neutral-200));
}

.wf-node:target {
  border-color: var(--bv-blue-400);
  box-shadow: 0 0 0 2px var(--bv-blue-100), var(--shadow-card-hover);
}

.wf-node__num {
  font-size: 11.5px;
  font-weight: var(--weight-bold);
  color: var(--neutral-400);
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}

.wf-node__title {
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  margin: 0 0 5px;
  color: var(--ink);
}

.wf-node__desc {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--neutral-700);
  margin: 0 0 13px;
  flex: 1;
}

.wf-node__roles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 11px;
  border-top: 1px solid var(--neutral-100);
}

.wf-chip {
  font-size: 10.5px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.02em;
  padding: 3px 8px;
  border-radius: 6px;
}

.wf-chip--owner {
  background: var(--bv-blue-400);
  color: #fff;
}

.wf-chip--ext {
  background: #fff;
  color: var(--neutral-700);
  border: 1px solid var(--neutral-200);
}

.wf-chip--inline {
  display: inline-block;
  vertical-align: middle;
}

/* ───────────────────── Scroll choreography ─────────────────────
   Only active when JS adds .wf-map--anim (motion allowed).
   Default state above keeps everything visible for no-JS + SEO. */
.wf-map--anim .wf-node {
  opacity: 0;
  transform: translateY(18px) scale(0.985);
  transition:
    opacity 0.55s var(--ease-spring),
    transform 0.55s var(--ease-spring);
  transition-delay: calc(min(var(--i, 0), 6) * 55ms);
  will-change: transform, opacity;
}

.wf-map--anim .wf-node.is-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}

.wf-map--anim .wf-lane__head {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.5s var(--ease-spring),
    transform 0.5s var(--ease-spring);
}

.wf-map--anim .wf-lane.is-in .wf-lane__head {
  opacity: 1;
  transform: none;
}

/* Hero entrance (restrained — the map is the moment) */
.wf-map--anim ~ * { /* no-op guard */ }

.rep-workflows.js-motion .wf-hero__line {
  opacity: 0;
  transform: translateY(14px);
  animation: wf-rise 0.7s var(--ease-spring) forwards;
}
.rep-workflows.js-motion .wf-hero__line--accent { animation-delay: 0.08s; }

@keyframes wf-rise {
  to { opacity: 1; transform: none; }
}

/* ───────────────────────── Reduced motion ─────────────────────────
   Hard reset: no transforms, no choreography, spine + rail fully shown. */
@media (prefers-reduced-motion: reduce) {
  .wf-map--anim .wf-node,
  .wf-map--anim .wf-lane__head,
  .rep-workflows.js-motion .wf-hero__line {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  .wf-node { transition: none; }
  .wf-map__spine-fill { height: 100% !important; }
  .wf-map__progress-fill { width: 100% !important; }
  .wf-rail__phase::before { transition: none; }
}