/* Documentary scene (wf-documentary.js): the bits that depend on the step.
   Shared replica pieces live in workflow.css. */
.wf-doc .ov-wall{ left: calc(var(--x) + 2px); max-width: 90%; }

/* Transcript rows read "Speaker" until step 04 names everyone. */
.wf-doc .da-sp .n{ opacity: 0; }
.wf-doc:not([data-step="2"]) .da-sp .n{ opacity: 1; }
.wf-doc:not([data-step="2"]) .da-sp .g{ opacity: 0; }

/* Step 04: the misheard name, and the editor popup fixing it. */
.wf-doc[data-step="3"] .da-fix{ background: rgba(74,158,255,.22); box-shadow: 0 0 0 1px rgba(74,158,255,.5); }
.wf-doc[data-step="3"] .da-edit{ opacity: 1; transform: none; }
.wf-doc[data-step="3"] .da-rows{ overflow: visible; }

/* Step 05: the map sits on an opaque strip so the soundbite cards stay readable. */
.wf-doc .da-mapwrap{ background: var(--da-bg); padding-top: 8px; box-shadow: 0 -14px 14px -4px var(--da-bg); }
@media (min-width: 881px) and (max-height: 800px){ .wf-doc .da-an .da-sb ~ .da-sb ~ .da-sb{ display: none; } }

/* Step 06: the label strip keeps five swatches; the extra control is dropped. */
.wf-doc .da-labels[data-on="5"] .r{ display: none; }

@media (max-width: 880px){
  .wf-doc .ov-wall{ font-size: 8.5px; letter-spacing: .1em; }
  .wf-doc .da-rows{ height: 118px; }
  .wf-doc .da-rows .da-para:nth-child(n+4){ display: none; }
  .wf-doc .da-labels .da-sw:nth-child(n+4), .wf-doc .da-labels .r{ display: none; }
  .wf-doc .da-sb .why{ display: none; }
  .wf-doc .da-an .da-sb ~ .da-sb{ display: none; }
  .wf-doc .da-beat .dur{ font-size: 8px; }
  .wf-doc .da-card2 .d, .wf-doc .da-fields{ display: none; }
  .wf-doc .da-tracks{ height: 44px; }
  .wf-doc .da-proj-h .da-btn2{ display: none; }
}