/* ══════════════════════════════════════════════════════════════
   EDITOR DE ROTEIRO
   Tela cheia sobre o site. Esquerda o markdown, direita a prévia.
   Só aparece quando alguém abre "Editar roteiro" no menu.
   ══════════════════════════════════════════════════════════════ */

#ed-overlay{
  position:fixed;inset:0;z-index:90;
  background:color-mix(in srgb, var(--tinta-0) 55%, transparent);
  backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;
  padding:clamp(.5rem,2vw,2rem);
}
#ed-overlay[hidden]{display:none}

.ed-caixa{
  width:min(1400px,100%);height:100%;
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--solo-0);color:var(--tinta-1);
  border:var(--borda);border-radius:var(--r-lg);
  box-shadow:0 24px 64px rgba(0,0,0,.4);
}

/* aviso para leitores de tela, fora da fluxo */
.ed-titulo{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

.ed-topo{
  display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;
  padding:.7rem .9rem;background:var(--solo-1);
  border-bottom:var(--borda);
}
.ed-id{display:flex;align-items:center;gap:.7rem;flex:1;min-width:0;flex-wrap:wrap}
.ed-id select{
  font:inherit;font-size:.92rem;
  min-height:38px;padding:.35rem .6rem;
  background:var(--solo-0);color:var(--tinta-0);
  border:var(--borda);border-radius:var(--r);
  max-width:100%;
}
.ed-quem{font-size:.76rem;color:var(--tinta-3);font-variant-numeric:tabular-nums}
.ed-acoes{display:flex;gap:.45rem;align-items:center}

.ed-bt{
  font:inherit;font-size:.84rem;font-weight:600;
  min-height:38px;padding:.4rem .85rem;cursor:pointer;
  border:var(--borda);border-radius:var(--r);
  background:var(--solo-0);color:var(--tinta-1);
  transition:background .15s var(--ease),border-color .15s var(--ease);
}
.ed-bt:hover:not(:disabled){background:var(--solo-2)}
.ed-bt:disabled{opacity:.45;cursor:default}
.ed-bt:focus-visible{outline:2px solid var(--ocre-forte);outline-offset:2px}
.ed-bt.ok{background:var(--ocre-forte);border-color:var(--ocre-forte);color:var(--solo-0)}
.ed-bt.ok:hover:not(:disabled){filter:brightness(1.08);background:var(--ocre-forte)}
.ed-bt.x{font-size:1.05rem;padding:.3rem .6rem;line-height:1}

.ed-fora{
  margin:0;padding:.45rem .9rem;font-size:.76rem;
  color:var(--tinta-3);background:var(--solo-1);
  border-bottom:var(--borda);
}
.ed-fora:empty{display:none}

.ed-aviso{
  margin:0;padding:.55rem .9rem;font-size:.82rem;
  border-bottom:var(--borda);
  background:var(--ocre-fundo);color:var(--tinta-1);
}
.ed-aviso[data-tipo="erro"]{background:var(--sangue-fundo)}
.ed-aviso[data-tipo="ok"]{background:var(--ceu-fundo)}
.ed-aviso[hidden]{display:none}
.ed-aviso b{display:block;margin-bottom:.35rem}

.ed-corpo{
  flex:1;display:grid;grid-template-columns:1fr 1fr;
  gap:1px;background:var(--solo-3);min-height:0;
}
.ed-lado{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--solo-0)}
/* O botão de inverter troca a ordem sem mexer no DOM. */
#ed-overlay.invertido .ed-corpo{direction:rtl}
#ed-overlay.invertido .ed-lado{direction:ltr}

.ed-rot{
  display:flex;align-items:center;justify-content:space-between;
  padding:.4rem .7rem;font-size:.7rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;
  color:var(--tinta-3);background:var(--solo-1);
  border-bottom:var(--borda);
}
.ed-mover{
  font:inherit;font-size:.9rem;line-height:1;cursor:pointer;
  min-width:34px;min-height:34px;padding:.2rem .4rem;
  background:transparent;color:var(--tinta-3);
  border:1px solid transparent;border-radius:var(--r);
}
.ed-mover:hover{background:var(--solo-2);color:var(--tinta-1)}
.ed-mover:focus-visible{outline:2px solid var(--ocre-forte);outline-offset:1px}

#ed-texto{
  flex:1;width:100%;min-height:0;resize:none;
  padding:1rem 1.1rem;border:0;outline:0;
  font-family:var(--mono);font-size:.92rem;line-height:1.65;
  color:var(--tinta-0);background:var(--solo-0);
  tab-size:2;
}
#ed-texto:focus-visible{box-shadow:inset 0 0 0 2px var(--ocre-forte)}

.ed-previa{flex:1;overflow-y:auto;padding:1rem 1.2rem;min-height:0}
.ed-crudo{
  font-family:var(--mono);font-size:.82rem;white-space:pre-wrap;
  word-break:break-word;color:var(--tinta-2);
}

.ed-pe{
  display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;
  padding:.5rem .9rem;background:var(--solo-1);
  border-top:var(--borda);
}
.ed-dica{flex:1;font-size:.74rem;color:var(--tinta-3);min-width:12rem}

.ed-vs{list-style:none;margin:.4rem 0;padding:0;max-height:40vh;overflow-y:auto}
.ed-vs li{margin-bottom:.25rem}
.ed-v{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  font:inherit;font-size:.8rem;text-align:left;cursor:pointer;
  min-height:38px;padding:.35rem .6rem;
  background:var(--solo-0);color:var(--tinta-1);
  border:var(--borda);border-radius:var(--r);
}
.ed-v:hover{background:var(--solo-2)}
.ed-v:focus-visible{outline:2px solid var(--ocre-forte);outline-offset:1px}
.ed-vr{color:var(--barro-forte);font-weight:600;font-size:.74rem}

@media(max-width:900px){
  /* Duas colunas espremem o texto demais em tela pequena: a prévia
     vira um botão que mostra e esconde. */
  .ed-corpo{grid-template-columns:1fr}
  #ed-overlay.invertido .ed-corpo{grid-template-columns:1fr}
  .ed-caixa{border-radius:var(--r)}
  .ed-acoes{width:100%;justify-content:flex-end}
  .ed-bt{flex:1;min-height:44px}
  .ed-bt.x{flex:0 0 auto}
  .ed-pe{justify-content:space-between}
}
@media(prefers-reduced-motion:reduce){
  .ed-bt{transition:none}
}