/* Painel · formulários: lista e editor (usa os tokens de admin.css; claro e escuro) */

/* ── lista ── */
.form-cartao-topo{display:flex; justify-content:space-between; gap:12px; align-items:flex-start}
.form-cartao-topo h3{overflow-wrap:anywhere}
.form-acoes{display:flex; gap:8px; flex-wrap:wrap}
/* o campo do link encolhe; os botões de copiar e abrir mantêm o tamanho (44px no toque) */
.form-cartao .link-copiar .entrada{flex:1 1 auto; min-width:0}
.form-cartao .link-copiar .botao--icone{flex:none}

/* ── janelas (modal) ── */
.modal-texto{color:var(--ink-soft); margin-bottom:10px; overflow-wrap:anywhere}
.modal-acoes--quebra{flex-wrap:wrap}
.form-novo{display:flex; flex-direction:column; gap:14px}
.modelos{display:flex; flex-direction:column; gap:8px; margin:0; padding:0; border:0; min-width:0}
.modelos legend{padding:0; margin-bottom:6px; font-size:12.5px; font-weight:500; color:var(--ink-soft)}
.modelo{display:flex; align-items:flex-start; gap:10px; min-height:44px; padding:10px 12px; border-radius:var(--raio-sm); border:1px solid var(--border-2); cursor:pointer}
.modelo:hover{background:var(--surface)}
.modelo--marcado{border-color:var(--acento); background:var(--gold-wash)}
.modelo input{flex:none; width:18px; height:18px; margin:2px 0 0; accent-color:var(--gold)}
.modelo b{display:block; color:var(--ink); font-weight:600}
.lista-conflito{display:flex; flex-direction:column; gap:6px; margin:0 0 4px; padding-left:18px; color:var(--ink-2)}
.lista-conflito li span{margin-left:8px}

.tipos-grade{display:flex; flex-direction:column; gap:14px; max-height:min(58vh, 520px); overflow:auto; padding:2px 4px 2px 2px}
.tipos-grupo{display:grid; grid-template-columns:1fr 1fr; gap:6px}
.tipos-titulo{grid-column:1 / -1; font:600 11px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin:2px 0 4px}
.tipo-botao{display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-height:44px; padding:10px 12px; border-radius:var(--raio-sm);
  border:1px solid var(--border-2); background:var(--surface); color:var(--ink-2); text-align:left; cursor:pointer; font:inherit}
.tipo-botao b{color:var(--ink); font-size:13.5px; font-weight:600}
.tipo-botao span{font-size:12px; line-height:1.35; color:var(--ink-soft)}
.tipo-botao:hover{border-color:var(--acento); background:var(--gold-wash)}

/* ── editor: topo ── */
.migalha{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:10px; font-size:13px; color:var(--ink-soft)}
.migalha [aria-current]{max-width:min(60vw, 520px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.editor-cabecalho{align-items:flex-start; margin-bottom:12px}
.editor-cabecalho-texto{flex:1 1 320px; min-width:0}
.editor-cabecalho h1{overflow-wrap:anywhere}
.editor-estado{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:8px}
.editor-estado .selo .ponto{background:currentColor}
.selo--ativo{color:var(--ink-2); background:rgba(111,191,149,.12); border-color:rgba(111,191,149,.45)}
.editor-estado .selo--ativo .ponto{background:var(--ok)}
.estado-salvo{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink-soft)}
.estado-salvo--sujo{color:var(--ink-2); font-weight:600}
.estado-salvo--sujo::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--alerta)}
.editor-acoes{display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.interruptor-texto{font-size:13px; color:var(--ink-soft)}
.editor-nota{margin:-4px 0 14px}
.editor-abas{margin-bottom:16px; overflow-x:auto; scrollbar-width:thin}
.editor-abas button{white-space:nowrap; min-height:40px}
.editor-rodape{margin-top:14px}

.avisos-editor{display:flex; flex-direction:column; gap:6px; margin:0 0 14px; padding:10px 14px; list-style:none; border-radius:var(--raio-sm);
  border:1px solid var(--border-2); background:var(--surface); font-size:13px; color:var(--ink-2)}
.avisos-editor li{position:relative; padding-left:16px}
.avisos-editor li::before{content:""; position:absolute; left:0; top:.5em; width:8px; height:8px; border-radius:50%; background:var(--alerta)}
.avisos-editor li.grave::before{background:var(--perigo)}
.editor-cartao .avisos-editor{margin:0}

/* ── editor: grade de duas colunas ── */
.editor-grade{display:grid; grid-template-columns:minmax(260px, 340px) minmax(0, 1fr); gap:18px; align-items:start}
.editor-lista{position:sticky; top:16px; display:flex; flex-direction:column; gap:12px; max-height:calc(100svh - 32px); overflow:auto; padding:2px}
.editor-detalhe{min-width:0}
.lista-perguntas{display:flex; flex-direction:column; gap:6px; margin:0; padding:0; list-style:none}
.item-pergunta{display:flex; align-items:stretch; gap:2px; border:1px solid var(--border); border-radius:var(--raio-sm); background:var(--surface); transition:border-color .12s ease, background-color .12s ease}
.item-pergunta:hover{border-color:var(--border-2)}
.item-pergunta--sel{border-color:var(--acento); background:var(--gold-wash); box-shadow:inset 3px 0 0 var(--acento)}
.item-pergunta--alvo{border-style:dashed; border-color:var(--acento)}
.item-pergunta--arrastando{opacity:.5}
.alca{flex:none; align-self:center; width:10px; height:22px; margin-left:6px; cursor:grab;
  background-image:radial-gradient(circle, var(--ink-dim) 1.1px, transparent 1.4px); background-size:5px 5px; background-position:center}
.item-abrir{flex:1; min-width:0; min-height:44px; display:flex; align-items:flex-start; gap:10px; padding:10px 8px; border:0; border-radius:var(--raio-sm);
  background:none; color:inherit; font:inherit; text-align:left; cursor:pointer}
.item-num{flex:none; display:grid; place-items:center; width:24px; height:24px; border-radius:6px; font-size:12px; font-weight:600; color:var(--ink-soft); background:var(--elev)}
.item-pergunta--sel .item-num{color:#15171B; background:var(--gold-light)}
.item-textos{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px}
.item-titulo{font-size:13.5px; line-height:1.35; font-weight:500; color:var(--ink); overflow-wrap:anywhere}
.item-info{font-size:12px; color:var(--ink-soft)}
.item-alerta{flex:none; width:10px; height:10px; margin-top:7px; border-radius:50%; background:var(--perigo)}
.item-mover{display:flex; flex-direction:column; justify-content:center; padding:2px}
.seta-cima, .seta-baixo{display:inline-flex}
.seta-cima svg{transform:rotate(-90deg)}
.seta-baixo svg{transform:rotate(90deg)}
.editor-adicionar{width:100%}

.ajuda-pontos{display:flex; flex-direction:column; gap:8px; padding:14px; font-size:13px; color:var(--ink-2)}
.ajuda-pontos-titulo{display:flex; align-items:center; gap:6px; font-weight:600; color:var(--ink)}
.ajuda-pontos-titulo svg{color:var(--acento)}
.pontos-max{font:600 22px/1 var(--sans); color:var(--ink); font-variant-numeric:tabular-nums}
.faixas{display:flex; flex-direction:column; gap:5px; margin:0; padding:0; list-style:none}
.faixas .selo{margin-right:4px}

/* ── editor: pergunta escolhida ── */
.editor-cartao{display:flex; flex-direction:column; gap:16px}
.editor-topo{display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:10px}
.editor-topo h2{font:600 19px/1.3 var(--serif)}
.editor-topo-acoes{display:flex; flex-wrap:wrap; gap:6px}
.sem-borda{min-width:0; margin:0; padding:0; border:0}
.editor-campos{display:flex; flex-direction:column; gap:14px}
.editor-campos:disabled .entrada{opacity:.85}
.entrada--titulo{min-height:64px; font-size:15px}
.caixa{display:flex; align-items:center; gap:10px; min-height:40px; color:var(--ink-2); cursor:pointer}
.caixa input{flex:none; width:18px; height:18px; margin:0; accent-color:var(--gold); cursor:pointer}
.caixa--alinhada{align-self:end}
.campo-rotulo{font-size:12.5px; font-weight:500; color:var(--ink-soft)}
.ajuda--aviso{color:var(--erro-texto)}

.bloco-opcoes, .bloco-logica{display:flex; flex-direction:column; gap:10px; min-width:0; margin:0; padding:12px 14px 14px; border:1px solid var(--border); border-radius:var(--raio-sm)}
.bloco-opcoes > legend, .bloco-logica > legend{padding:0 6px; font-size:13.5px; font-weight:600; color:var(--ink)}
.lista-opcoes{display:flex; flex-direction:column; gap:10px; margin:0; padding:0; list-style:none}
.opcao-linha{display:grid; gap:8px 10px; align-items:start; padding:10px; border-radius:var(--raio-sm); background:var(--bg-2); border:1px solid var(--border);
  grid-template-columns:28px 96px minmax(0, 1fr) auto;
  grid-template-areas:"letra rotulo rotulo acoes" ". pontos tags tags" ". salto salto salto"}
.opcao-letra{grid-area:letra; display:grid; place-items:center; width:26px; height:26px; margin-top:7px; border-radius:6px; border:1px solid var(--gold-line); font-size:12px; font-weight:700; color:var(--acento)}
.opcao-rotulo{grid-area:rotulo; min-width:0}
.opcao-pontos{grid-area:pontos; min-width:0}
.opcao-tags{grid-area:tags; min-width:0}
.opcao-salto{grid-area:salto; min-width:0}
.opcao-acoes{grid-area:acoes; display:flex; align-items:center; gap:2px; margin-top:2px}
.opcao-valor{font-size:11.5px; overflow-wrap:anywhere}
.opcao-linha .campo > span:not(.ajuda){font-size:12px}

.condicao{display:flex; flex-direction:column; gap:10px; padding-left:28px}
.valores-condicao{display:flex; flex-wrap:wrap; gap:2px 18px; min-width:0; margin:0; padding:0; border:0}
.valores-condicao > legend{padding:0; margin-bottom:4px; font-size:12.5px; font-weight:500; color:var(--ink-soft)}
.caixa--perdida span{color:var(--erro-texto)}
.avancado > summary{display:flex; align-items:center; min-height:32px; color:var(--ink-soft); font-size:13px; cursor:pointer}
.avancado[open] > summary{margin-bottom:10px}

.revisao{padding:10px 14px; border-radius:var(--raio-sm); background:var(--gold-wash); border:1px solid var(--gold-line); font-size:13px; color:var(--ink-2)}
.revisao-titulo{margin-bottom:4px; font-weight:600; color:var(--ink)}
.revisao ul{margin:0; padding-left:18px}

/* prévia só de leitura, no estilo do formulário público */
.previa-bloco{padding-top:14px; border-top:1px solid var(--border)}
.previa-legenda{margin-bottom:8px; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft)}
.previa{display:flex; flex-direction:column; align-items:flex-start; gap:12px; padding:22px 20px; border-radius:var(--raio); background:var(--bg); border:1px solid var(--border)}
.previa--abertura, .previa--fim{align-items:center; text-align:center}
.previa--fim{margin-top:4px}
.previa-titulo{font:500 19px/1.35 var(--serif); color:var(--ink); overflow-wrap:anywhere}
.previa-num{margin-right:8px; font:600 13px/1 var(--sans); color:var(--acento)}
.previa-desc{font-size:14px; color:var(--ink-soft); overflow-wrap:anywhere}
.previa-campo{width:100%; padding:8px 2px; border-bottom:2px solid var(--borda-campo); font-size:15px; color:var(--ink-dim)}
.previa-opcoes{display:flex; flex-direction:column; gap:6px; width:100%; max-width:440px}
.previa-opcao{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--raio-sm); border:1px solid var(--gold-line); background:var(--gold-wash); font-size:14px; color:var(--ink); overflow-wrap:anywhere}
.previa-opcao b, .previa-caixa{flex:none; display:grid; place-items:center; width:22px; height:22px; border-radius:4px; border:1px solid var(--gold-line); font-size:11px; color:var(--acento)}
.previa-botao{display:inline-flex; padding:8px 16px; border-radius:var(--raio-sm); font-size:14px; font-weight:600; color:#15171B;
  background:linear-gradient(135deg, var(--gold-pale) 0%, var(--gold-light) 30%, var(--gold) 100%)}
.previa-botao--zap{color:#fff; background:#15803D}
.previa-ressalva{font-size:12px; color:var(--ink-soft)}

/* ── configurações ── */
.config-grade{display:flex; flex-direction:column; gap:16px; max-width:820px}
.config-grade > fieldset{display:flex; flex-direction:column; gap:16px}
.config-cartao{display:flex; flex-direction:column; gap:14px}
.config-cartao h2{font:600 17px/1.3 var(--serif)}
.slug-linha{display:flex; align-items:center; gap:8px}
.slug-prefixo{flex:none; color:var(--ink-soft); font-size:13px}
.slug-link{color:var(--ink-2); overflow-wrap:anywhere}
.slug-ajuda{display:flex; flex-direction:column; gap:4px}
.slug-link-linha{display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px}
.config-perigo{border-color:rgba(229,140,133,.35)}

/* ── respostas ── */
.lista-respostas{display:flex; flex-direction:column; gap:10px}
.resposta-item{padding:14px 16px; border-radius:var(--raio); border:1px solid var(--border); background:var(--surface)}
.resposta-topo{display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:12px}
.resposta-quem{display:flex; flex-direction:column; gap:2px; min-width:0}
.resposta-nome{min-height:32px; padding:0; border:0; background:none; font:600 15px/1.3 var(--sans); color:var(--acento); text-align:left;
  text-decoration:underline; text-underline-offset:3px; cursor:pointer; overflow-wrap:anywhere}
.resposta-nome--sem{color:var(--ink-soft); text-decoration:none; cursor:default; display:inline-flex; align-items:center}
.resposta-detalhes{margin-top:6px}
.resposta-detalhes > summary{display:flex; align-items:center; min-height:32px; color:var(--ink-soft); font-size:13px; cursor:pointer}
.resposta-detalhes .qa{margin-top:8px}
.resposta-detalhes .qa-item{background:var(--bg-2)}

/* setinha dos <details> (o display:flex do summary esconde a padrão) */
.avancado > summary, .resposta-detalhes > summary{gap:8px; list-style:none}
.avancado > summary::-webkit-details-marker, .resposta-detalhes > summary::-webkit-details-marker{display:none}
.avancado > summary::before, .resposta-detalhes > summary::before{content:""; flex:none; width:7px; height:7px; margin:0 2px 2px 2px;
  border-right:1.7px solid currentColor; border-bottom:1.7px solid currentColor; transform:rotate(-45deg); transition:transform .15s ease}
.avancado[open] > summary::before, .resposta-detalhes[open] > summary::before{transform:rotate(45deg)}

/* tema claro: o dourado de --acento fica abaixo de 4,5:1 sobre o fundo bege (e sobre o
   --gold-wash da prévia); texto pequeno destas partes usa um dourado mais escuro */
:root[data-tema="claro"] .previa-opcao b, :root[data-tema="claro"] .previa-caixa,
:root[data-tema="claro"] .previa-num, :root[data-tema="claro"] .migalha a{color:#6F5520}
:root[data-tema="claro"] .editor-abas button.ativa{color:#6F5520; border-bottom-color:#6F5520}

/* ── telas largas: opção numa linha só ── */
@media (min-width:1400px){
  .opcao-linha{grid-template-columns:28px minmax(0, 2fr) 84px minmax(0, 1.2fr) minmax(0, 1.3fr) auto;
    grid-template-areas:"letra rotulo pontos tags salto acoes"}
}
@media (max-width:1100px){
  .editor-grade{grid-template-columns:minmax(230px, 290px) minmax(0, 1fr)}
}
@media (max-width:860px){
  .editor-grade{grid-template-columns:minmax(0, 1fr)}
  .editor-lista{position:static; max-height:none; overflow:visible; padding:0}
  .editor-detalhe{scroll-margin-top:76px} /* não some embaixo da barra fixa do celular */
  .lista-perguntas{max-height:55vh; overflow:auto}
  .editor-acoes{width:100%}
  .migalha [aria-current]{max-width:60vw}
}
@media (max-width:600px){
  .opcao-linha{grid-template-columns:28px 84px minmax(0, 1fr);
    grid-template-areas:"letra rotulo rotulo" ". pontos tags" ". salto salto" ". acoes acoes"}
  .opcao-acoes{justify-content:flex-end}
  .condicao{padding-left:0}
  .tipos-grupo{grid-template-columns:1fr}
  .editor-abas button{padding:9px 9px; font-size:14px}
  .slug-linha{flex-wrap:wrap}
  .slug-linha .entrada{flex:1 1 180px}
}

/* toque: alvos com pelo menos 44px */
@media (pointer:coarse){
  .caixa, .modelo, .interruptor, .editor-abas button, .avancado > summary, .resposta-detalhes > summary, .resposta-nome{min-height:44px}
  .migalha a, .ajuda-pontos a{display:inline-flex; align-items:center; min-height:44px; min-width:44px}
  .item-mover{flex-direction:row; align-items:center}
}