/* ── C3: Sticky Split-Screen — How-It-Works ───────────────────────────
   Wave C3 | Playground: playgrounds/sticky-splitscreen.html
   Mobile (<769px): accordion visible, split-screen hidden (CSS-only toggle)
   Desktop (≥769px): split-screen visible, accordion hidden
*/

/* ── SPLIT CONTAINER ── */
.hiw-split {
  display: none; /* mobile default — overridden by desktop breakpoint below */
  width: 100%;
  margin-top: 2.5rem;
  position: relative;
  align-items: stretch; /* right col must match left col height for sticky to work */
}

/* ── LEFT COL — scrolling step blocks ── */
.hiw-steps-col {
  flex: 0 0 44%;
  min-width: 0;
}

.hiw-step {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 60px 48px;
  border-right: 1px solid #21262D;
  opacity: 0.28;
  transition: opacity 0.45s ease;
}
.hiw-step.hiw-step--active { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .hiw-step { transition: none; }
}

.hiw-step-inner { max-width: 420px; }

.hiw-step-num {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #00C9A7;
  text-transform: uppercase;
  margin-bottom: 14px;
  text-shadow: 0 0 10px rgba(0, 201, 167, 0.4);
}
.hiw-step-title {
  font-size: clamp(22px, 2.8vw, 32px);
  font-weight: 700;
  line-height: 1.2;
  color: #E6EDF3;
  margin: 0 0 14px;
}
.hiw-step-sub {
  font-size: 13px;
  color: #8B949E;
  line-height: 1.6;
  margin-bottom: 10px;
}
.hiw-step-detail {
  font-size: 12px;
  color: #6E7681;
  line-height: 1.65;
  font-style: italic;
  margin: 0;
}

/* ── RIGHT COL — sticky visualization ── */
.hiw-vis-col {
  flex: 0 0 56%;
  min-width: 0;
  position: relative;
}

.hiw-sticky {
  position: sticky;
  top: 76px; /* nav=56px + 20px buffer */
  height: calc(100vh - 76px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 32px;
}

/* ── VIS STATES ── */
.hiw-vis-state {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: none;
}
.hiw-vis-state.hiw-vis--active {
  display: flex;
  animation: hiwFadeIn 0.4s ease;
}
@media (prefers-reduced-motion: reduce) {
  .hiw-vis-state.hiw-vis--active { animation: none; }
}
@keyframes hiwFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hiw-vis-label {
  font-size: 13px;
  letter-spacing: 0.10em;
  color: #00C9A7;
  text-transform: uppercase;
  font-weight: 700;
  text-shadow: 0 0 10px rgba(0, 201, 167, 0.4);
}
.hiw-vis-svg {
  width: 100%;
  max-width: none;
  max-height: calc(100vh - 200px);
}
.hiw-vis-caption {
  font-size: 13px;
  color: #00C9A7;
  text-align: center;
  line-height: 1.6;
  margin: 0;
  opacity: 0.75;
}

/* ── SVG NODE / EDGE CLASSES ── */
.hiw-node-empty { fill: #161B22; stroke: #30363D; stroke-width: 1.5; }
.hiw-edge-empty { stroke: #21262D; stroke-width: 1; stroke-dasharray: 4 3; fill: none; }

.hiw-node-p1 { fill: rgba(0,201,167,0.10); stroke: #00C9A7; stroke-width: 1.5; }
.hiw-node-p2 { fill: rgba(245,158,11,0.12); stroke: #F59E0B; stroke-width: 1.2; }
.hiw-node-p3 { fill: rgba(245,158,11,0.12); stroke: #F59E0B; stroke-width: 1.2; }
.hiw-node-p4 { fill: rgba(61,80,101,0.12);  stroke: #3D5065; stroke-width: 1; }
.hiw-node-p5 { fill: rgba(61,80,101,0.12);  stroke: #3D5065; stroke-width: 1; }

.hiw-edge-live { stroke: #00C9A7; stroke-width: 1; opacity: 0.45; fill: none; }
.hiw-edge-conf { stroke: #F59E0B; stroke-width: 0.8; opacity: 0.35; fill: none; }
.hiw-conf-label { font-size: 9px; fill: #8B949E; font-family: monospace; }
.hiw-override-ring { fill: none; stroke: #F59E0B; stroke-width: 2; stroke-dasharray: 3 2; }

/* ── MOBILE / DESKTOP TOGGLE (MUST be last — source order wins at equal specificity) ── */
@media (max-width: 768px) {
  .hiw-split { display: none !important; }
}
@media (min-width: 769px) {
  #accordion { display: none; }
  .hiw-split { display: flex; }
}