/* Previa interativa do Nava Look Studio. A imagem e processada no navegador
   (WebGL2) e o painel segue o desenho do DCTL no Resolve. Tudo escopado em
   .nl para nao encostar no resto da pagina. Layout: imagem e faixa de
   miniaturas a esquerda, painel a direita; abaixo de 960 px empilha. */
#navaLook{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px;align-items:start;font-family:'Segoe UI','Open Sans',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;text-align:left}
@media(max-width:960px){#navaLook{grid-template-columns:1fr}}
.nl,.nl *{box-sizing:border-box;margin:0;padding:0}
.nl-stage{position:relative;background:#000;border-radius:6px;overflow:hidden;border:1px solid #2a2b2f;aspect-ratio:16/9}
.nl canvas{display:block;width:100%;height:100%;object-fit:contain}
.nl .nl-status{position:absolute;inset:0;display:grid;place-items:center;font-size:13px;color:#9a9a9f;background:rgba(0,0,0,.6);text-align:center;padding:16px}
.nl .nl-status[hidden]{display:none}
/* faixa de miniaturas: troca o quadro de entrada; cada uma ocupa 1/10 da faixa */
.nl-strip{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;justify-content:flex-start}
.nl-strip[hidden]{display:none}
.nl-strip button{flex:0 0 calc(10% - 6px);padding:0;border:1px solid #303136;border-radius:4px;background:#111;cursor:pointer;opacity:.62;transition:opacity .15s,border-color .15s;overflow:hidden;font:inherit;color:inherit}
.nl-strip .nl-th{display:block;width:100%;aspect-ratio:16/9;background:#111 center/cover no-repeat}
.nl-strip .nl-nm{display:none}
/* quando a pagina encaixa os blocos em outro lugar, o root fica vazio e some */
#navaLook.nl-encaixado{display:none}
.nl-strip button:hover{opacity:.9}
.nl-strip button.on{opacity:1;border-color:#e6e6e8;box-shadow:0 0 0 1px #e6e6e8}
/* piscada na miniatura que recebeu o ajuste copiado (botao do meio) */
.nl-strip button.nl-copiou .nl-th{animation:nlCopiou .7s ease-out}
@keyframes nlCopiou{0%{box-shadow:inset 0 0 0 40px rgba(255,255,255,.55)}100%{box-shadow:inset 0 0 0 40px rgba(255,255,255,0)}}

/* ---- painel no desenho do DCTL do Resolve ---- */
.nl.dctl{background:#232427;border:1px solid #303136;border-radius:4px;font-size:12px;color:#c4c4c8;user-select:none}
.nl .dctl-head{display:flex;align-items:center;gap:8px;height:34px;padding:0 8px 0 10px;background:#2b2c30;border-bottom:1px solid #1a1a1d}
.nl .sw{width:26px;height:14px;border-radius:7px;background:#d9261c;position:relative;flex:none;box-shadow:inset 0 1px 1px rgba(0,0,0,.4);border:0;padding:0;cursor:pointer;transition:background .15s}
.nl .sw:after{content:"";position:absolute;top:2px;right:2px;width:10px;height:10px;border-radius:50%;background:#f4f4f6;box-shadow:0 1px 2px rgba(0,0,0,.5);transition:right .15s,left .15s}
/* desligado: cinza, bolinha a esquerda */
.nl .sw.off{background:#5a5a62}
.nl .sw.off:after{right:14px}
.nl .dctl-head b{font-weight:700;color:#e9e9eb;letter-spacing:.01em}
.nl .dctl-head .tools{margin-left:auto;display:flex;align-items:center;gap:6px}
.nl .ico{width:22px;height:22px;display:grid;place-items:center;color:#a9a9ae;border-radius:3px;background:none;border:0;font:inherit;cursor:pointer}
.nl .ico:hover{background:#34353a;color:#e9e9eb}
.nl .ico.dec{cursor:default;opacity:.55}
.nl .ico.mover{cursor:grab;color:#c9c9ce}
.nl .ico.mover:hover{background:none;color:#e9e9eb}
.nl .ico.dec:hover{background:none;color:#a9a9ae}
.nl .ico svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.nl .rows{padding:4px 6px 6px 8px}
.nl .r{display:grid;grid-template-columns:100px 1fr 52px 12px 20px;align-items:center;gap:6px;height:25px}
.nl .r label{text-align:right;color:#b9b9bd;padding-right:2px;white-space:nowrap;font-size:12px}
.nl .val{height:19px;background:#1e1f22;border:1px solid #3a3b40;border-radius:3px;color:#e6e6e8;text-align:right;padding:0 5px;line-height:17px;font-variant-numeric:tabular-nums;font-size:12px}
.nl .kf{color:#7d7d83;font-size:9px;text-align:center;line-height:1}
.nl .r select{height:20px;font:inherit;font-size:12px;color:#e6e6e8;background:#1e1f22 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23b0b0b5' stroke-width='1.4'/></svg>") no-repeat right 7px center;border:1px solid #3a3b40;border-radius:3px;padding:0 22px 0 7px;-webkit-appearance:none;appearance:none;grid-column:2/4;cursor:pointer}
.nl .r select:disabled{opacity:.5;cursor:not-allowed}
.nl .chk{display:flex;align-items:center;gap:8px;grid-column:2/5;color:#c4c4c8}
.nl .chk label{text-align:left}
.nl .chk input{width:14px;height:14px;margin:0;appearance:none;-webkit-appearance:none;background:#1e1f22;border:1px solid #6b6b70;border-radius:2px;position:relative;cursor:pointer}
.nl .chk input:checked{background:#1e1f22;border-color:#8a8a90}
.nl .chk input:checked:after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid #e6e6e8;border-width:0 1.6px 1.6px 0;transform:rotate(45deg)}
.nl .chk input:disabled{opacity:.45;cursor:not-allowed}
.nl .chk.dis{color:#7d7d83}
.nl input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:18px;background:transparent;cursor:pointer;margin:0}
.nl input[type=range]::-webkit-slider-runnable-track{height:2px;background:#5a5b60;border-radius:1px}
.nl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:10px;border-radius:50%;background:#e9e9eb;border:1px solid #2a2a2e;margin-top:-4px;box-shadow:0 1px 2px rgba(0,0,0,.6)}
.nl input[type=range]::-moz-range-track{height:2px;background:#5a5b60}
.nl input[type=range]::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:#e9e9eb;border:1px solid #2a2a2e}
.nl .gb{display:flex;align-items:center;gap:6px;height:28px;padding:0 4px;margin-top:2px;border-top:1px solid #1a1a1d;color:#b9b9bd}
.nl .gb span:first-child{font-size:10px;color:#8a8a8f}

/* celular: imagem em cima, miniaturas em duas fileiras de cinco, painel embaixo
   com as mesmas linhas; o dedo precisa de mais altura no slider */
@media(max-width:700px){
  .nl-strip button{flex:0 0 calc(20% - 6px)}
  .nl .r{height:30px}
  .nl input[type=range]{height:24px}
  .nl input[type=range]::-webkit-slider-thumb{width:14px;height:14px;margin-top:-6px}
  .nl input[type=range]::-moz-range-thumb{width:14px;height:14px}
}