/* Topo: a janela do Roteiro em HTML. Cores no espírito do painel: falas em azul, áudio em verde, B-roll com miniatura. */
.hj { --gen-line: rgba(153,200,255,.5); --gen-strong: #99c8ff; --gen-ink: rgba(153,200,255,.16); --gen-surface: #0b0c0e;
  --gen-text: #f5f5f3; --gen-muted: #8a9099; --gen-font: "Geist Mono", ui-monospace, monospace;
  background: #0d0e10; box-shadow: var(--glow-forte), 0 0 140px -40px rgba(42,92,240,.55); }

.hj-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--linha); }
.hj-titulo { display: grid; gap: 2px; min-width: 0; }
.hj-titulo b { font-weight: 500; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hj-titulo span { font-family: var(--mono); font-size: 11.5px; color: var(--t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hj-btn { flex: none; display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 999px; background: var(--t1); color: #0c0d0f; font-size: 13px; font-weight: 500;
  transition: box-shadow 400ms var(--sai); }
.hj-btn.feito { box-shadow: 0 0 0 4px rgba(120,217,176,.18), 0 0 30px -4px rgba(120,217,176,.6); }

.hj-linha { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 0 10px; padding: 8px 18px 18px; }
.hj-nomes { display: grid; gap: 4px; padding-top: 22px; align-content: start; }
.hj-nome { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10.5px; color: var(--t3); }
.hj-nome b { font-weight: 400; color: var(--t2); }
.hj-area { position: relative; min-width: 0; }
.hj-regua { position: relative; height: 22px; border-bottom: 1px solid var(--linha);
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.12) 0 1px, transparent 1px calc(100% / 46)) bottom / 100% 5px no-repeat; }
.hj-regua span { position: absolute; top: 2px; font-family: var(--mono); font-size: 10px; color: var(--t3); transform: translateX(3px); }
.hj-trilhas { display: grid; gap: 4px; padding-top: 0; }
.hj-trilha { position: relative; border-radius: 4px; background: rgba(255,255,255,.022); }

/* alturas por tipo de trilha (nomes e trilhas iguais) */
.hj .texto { height: 22px; } .hj .cor { height: 14px; } .hj .grafico { height: 24px; } .hj .broll { height: 34px; }
.hj .fala { height: 40px; } .hj .voz { height: 30px; } .hj .sfx { height: 18px; } .hj .musica { height: 34px; }

.hj-clipe { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; padding: 0 6px; border-radius: 4px; overflow: hidden; transform-origin: left center;
  font-family: var(--mono); font-size: 10px; letter-spacing: .01em; white-space: nowrap; border: 1px solid transparent; }
.hj-clipe span { overflow: hidden; text-overflow: ellipsis; }
.hj-clipe.fala { background: linear-gradient(180deg, #2c55c2, #1c3a8a); border-color: rgba(153,200,255,.32); color: #e8f1ff; }
.hj-clipe.fala::before { content: ""; flex: none; width: 22px; height: 26px; margin: 0 6px 0 -3px; border-radius: 3px;
  background: radial-gradient(circle at 50% 38%, rgba(18,15,13,.9) 0 18%, transparent 19%), radial-gradient(ellipse 60% 70% at 55% 30%, rgba(255,241,220,.55), transparent 70%), linear-gradient(178deg, #3a4560, #1c2230); }
.hj-clipe.hj-escolhido { border-color: #cfe3ff; box-shadow: 0 0 0 1px rgba(207,227,255,.5), 0 0 18px rgba(90,162,255,.7); }
.hj-clipe.broll { border-color: rgba(255,255,255,.14); color: rgba(255,255,255,.85); text-shadow: 0 1px 2px rgba(0,0,0,.8); align-items: flex-end; padding-bottom: 3px; }
.hj .th0 { background: radial-gradient(ellipse 30% 50% at 60% 30%, rgba(255,241,220,.5), transparent 70%), linear-gradient(178deg, #5a412c, #3b2a1d 60%, #1d1611 61%, #4b3626); }
.hj .th1 { background: radial-gradient(ellipse 30% 50% at 30% 28%, rgba(255,241,220,.45), transparent 70%), linear-gradient(182deg, #55575a, #38393c 60%, #1c1d1f 61%, #434447); }
.hj .th2 { background: radial-gradient(ellipse 26% 40% at 70% 34%, rgba(255,241,220,.5), transparent 70%), linear-gradient(184deg, #8a8378, #635d54 58%, #2e2b27 59%, #514b43); }
.hj .th3 { background: radial-gradient(ellipse 30% 50% at 40% 26%, rgba(255,241,220,.5), transparent 70%), linear-gradient(178deg, #3d4a37, #2a3327 64%, #151a14 65%, #33402f); }
.hj .th4 { background: radial-gradient(ellipse 28% 46% at 48% 26%, rgba(255,241,220,.5), transparent 70%), linear-gradient(178deg, #2b3445, #1c2230 58%, #0f1219 59%, #262e3d); }
.hj .th5 { background: radial-gradient(ellipse 30% 50% at 55% 30%, rgba(255,241,220,.5), transparent 70%), linear-gradient(180deg, #6b5444, #4a3a2f 66%, #221b16 67%, #5a4639); }
.hj-clipe.voz { background: rgba(120,217,176,.10); border-color: rgba(120,217,176,.28); padding: 0 2px; }
.hj-clipe.voz svg { width: 100%; height: 100%; }
.hj-clipe.voz path { stroke: #78d9b0; stroke-width: 1.8; vector-effect: non-scaling-stroke; opacity: .85; }
.hj-clipe.sfx { background: rgba(120,217,176,.32); border-color: rgba(120,217,176,.55); }
.hj-clipe.musica { background: rgba(120,217,176,.08); border-color: rgba(120,217,176,.24); color: #9fe6c8; align-items: flex-start; padding-top: 2px; }
.hj-curva { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hj-curva path { fill: none; stroke: #78d9b0; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.hj-clipe.cor { background: repeating-linear-gradient(135deg, rgba(153,200,255,.16) 0 6px, rgba(153,200,255,.07) 6px 12px); border-color: rgba(153,200,255,.2); color: var(--azul-sel); font-size: 9px; }
.hj-clipe.grafico { background: linear-gradient(90deg, #1a2656, #33489e); border-color: rgba(153,200,255,.35); color: #dbe7ff; }
.hj-clipe.texto { background: rgba(245,245,243,.9); color: #0c0d0f; border-color: #fff; }

.hj-agulha { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: var(--azul-claro); box-shadow: 0 0 12px rgba(90,162,255,.9); opacity: 0; pointer-events: none; }
.hj-agulha::before { content: ""; position: absolute; top: 0; left: -5px; width: 12px; height: 10px; background: var(--azul-claro); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.hj-motivo { position: absolute; right: 1%; top: 96px; width: 270px; padding: 10px 12px; border-radius: 10px; background: rgba(17,18,20,.96); border: 1px solid var(--azul-borda);
  box-shadow: 0 18px 40px -12px rgba(0,0,0,.9); font-size: 12.5px; line-height: 1.4; color: var(--t2); opacity: 0; pointer-events: none; }
.hj-motivo b { display: block; font-family: var(--mono); font-weight: 400; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--azul-sel); margin-bottom: 3px; }
.hj-motivo::after { content: ""; position: absolute; left: 34%; bottom: -6px; width: 10px; height: 10px; background: inherit; border-right: 1px solid var(--azul-borda); border-bottom: 1px solid var(--azul-borda); transform: rotate(45deg); }

.hj.vazia .hj-clipe, .hj.vazia .hj-curva { opacity: 0; }
.hj.pronta .hj-motivo { opacity: 1; }

@media (max-width: 700px) {
  .hj-cabeca { padding: 12px; }
  .hj-titulo span { display: none; }
  .hj-btn { height: 30px; padding: 0 12px; font-size: 12px; }
  .hj-linha { grid-template-columns: 26px minmax(0, 1fr); gap: 0 6px; padding: 6px 10px 12px; }
  .hj-nome span { display: none; }
  .hj-clipe span, .hj-clipe.fala::before { display: none; }
  .hj .broll { height: 26px; } .hj .fala { height: 30px; } .hj .voz { height: 22px; } .hj .musica { height: 26px; } .hj .grafico { height: 18px; } .hj .texto { height: 16px; }
  .hj-motivo { right: 2%; top: 60px; width: 200px; font-size: 11.5px; }
}
@media (max-width: 400px) { .hj-motivo { display: none; } }
.t-gen { z-index: 40 !important; } /* o desenho da geração passa por baixo do topo fixo */