/* ===================================================================
   NERY | Comentário jurídico — CSS do componente (carregado pelo tema)
   Só na single de Comentário (post type `nery_comment`). O corpo do post
   é HTML estruturado com as classes .cm-* ; este arquivo estiliza esses
   componentes. Fontes (Newsreader + Hanken Grotesk) vêm do enqueue
   `nc-fonts` do tema — não há @import aqui.
   Escopado em .nery-comentario: não afeta o resto do site.
   =================================================================== */

.nery-comentario {
  /* ---- variáveis de cor/fonte (estáveis, independentes da editoria) ---- */
  --paper:      oklch(0.972 0.008 78);
  --paper-2:    oklch(0.945 0.010 76);
  --paper-3:    oklch(0.918 0.009 80);
  --edge:       oklch(0.872 0.012 78);
  --edge-soft:  oklch(0.905 0.010 78);
  --ink:        oklch(0.275 0.012 58);
  --ink-soft:   oklch(0.430 0.012 60);
  --ink-faint:  oklch(0.585 0.011 62);
  --accent:      oklch(0.645 0.224 33);
  --accent-deep: oklch(0.560 0.205 32);
  --accent-wash: oklch(0.645 0.224 33 / 0.10);
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans:  'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --cm-gap: clamp(34px, 4.5vw, 52px);
  font-family:var(--serif); color:var(--ink); font-size:18px; line-height:1.68;
}
.nery-comentario, .nery-comentario *, .nery-comentario *::before, .nery-comentario *::after { box-sizing:border-box; }
.nery-comentario a { color:inherit; text-decoration:none; }
.nery-comentario b, .nery-comentario strong { font-weight:700; }

/* parágrafos e listas de prosa (apenas os filhos diretos das seções) */
.nery-comentario .cm-sec > p { font-family:var(--serif); font-size:1.04em; line-height:1.66; color:var(--ink); margin:0 0 1.05em; }
.nery-comentario .cm-sec > p:last-child { margin-bottom:0; }
.nery-comentario .cm-sec > ol, .nery-comentario .cm-sec > ul { margin:0 0 1.2em; padding-left:0; list-style:none; }
.nery-comentario .cm-sec > ol > li, .nery-comentario .cm-sec > ul > li { position:relative; margin-bottom:0.7em; font-family:var(--serif); font-size:1.03em; line-height:1.6; color:var(--ink); }
.nery-comentario .cm-sec > ul > li { padding-left:1.6em; }
.nery-comentario .cm-sec > ul > li::before { content:""; position:absolute; left:0; top:0.62em; width:7px; height:7px; background:var(--accent); transform:rotate(45deg); }

/* ---- LARGURA: solta o comentário da coluna estreita do tema ----
   O tema prende .article.no-rail .wrap em 860px e .col-main em 760px
   (style.css). O comentário usa o layout largo (índice + documento) do
   mockup aprovado. Prefixado com .single-nery_comment para não afetar
   outras páginas caso um plugin de cache combine este CSS com o global.
   Abaixo de 1040px o .cm-layout já colapsa em coluna única. */
@media (min-width:1040px) {
  .single-nery_comment .article.no-rail .wrap { max-width:1080px; }
  .single-nery_comment .col-main { max-width:none; }
}

/* linha de autoria dentro do corpo — oculta: a assinatura vem do tema/plugin */
.nery-comentario .cm-autoria { display:none !important; }

/* link de volta ao compilado de origem — texto simples, sem box */
.nery-comentario .cm-back { display:inline-flex; align-items:center; flex-wrap:wrap; gap:9px; font-family:var(--sans); font-size:1.04em; font-weight:700; letter-spacing:.01em; color:var(--ink-faint); margin:18px 0 var(--cm-gap); transition:color .15s; }
.nery-comentario .cm-back .ic, .nery-comentario .cm-back .tx, .nery-comentario .cm-back > b { flex:none; }
.nery-comentario .cm-back:hover { color:var(--accent); }
.nery-comentario .cm-back .ic { transition:transform .18s; }
.nery-comentario .cm-back:hover .ic { transform:translateX(-3px); }
/* iguala a distância "resumo → veja o compilado" e "veja o compilado → linha da 1ª seção" */
.nery-comentario .cm-back + .cm-sec { margin-top:18px; }

/* resumo executivo em destaque */
.nery-comentario .cm-resumo { border-left:4px solid var(--accent); padding:clamp(22px,3vw,30px) clamp(22px,3vw,32px); margin:30px 0 var(--cm-gap); }
.nery-comentario .cm-resumo .lbl { font-family:var(--sans); font-size:11.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); display:flex; align-items:center; gap:9px; margin-bottom:13px; }
.nery-comentario .cm-resumo .lbl::before { content:""; width:9px; height:9px; background:var(--accent); transform:rotate(45deg); flex:none; }
.nery-comentario .cm-resumo p { font-family:var(--serif); font-size:1.1em; line-height:1.6; color:var(--ink); margin:0; }

/* layout: título+autoria no topo da coluna de texto + índice lateral fixo (alinhado
   ao topo do título) + documento. Em telas largas é um grid de 2 colunas / 2 linhas
   (grid-template-areas) para que .cm-aside ocupe a altura de .cm-head + .cm-doc e seu
   topo alinhe com o topo do título. Abaixo de 1040px colapsa em coluna única,
   empilhando na ordem head → aside → doc. */
.nery-comentario .cm-layout { margin-top:30px; }
@media (min-width:1040px) {
  .nery-comentario .cm-layout {
    display:grid;
    grid-template-columns:212px minmax(0,1fr);
    grid-template-areas:"aside head" "aside doc";
    column-gap:52px;
    align-items:start;
  }
  .nery-comentario .cm-head { grid-area:head; }
  .nery-comentario .cm-aside { grid-area:aside; position:sticky; top:84px; align-self:start; }
  .nery-comentario .cm-doc { grid-area:doc; }
}

/* cabeçalho do comentário (título/dek/autoria) — topo da coluna de texto, ao lado
   do índice. Reaproveita o visual do .hero global (h1/.dek/.rule-short em style.css),
   mas escopado aqui porque o Compilado ainda usa o .hero de faixa larga acima do grid. */
.nery-comentario .cm-head { margin-bottom:0; }
.nery-comentario .cm-head h1 {
  font-family:var(--serif); font-weight:600;
  font-size:clamp(30px, 4vw, 46px); line-height:1.08; letter-spacing:-0.02em; margin-top:16px;
}
.nery-comentario .cm-head .dek {
  font-family:var(--serif); font-size:clamp(18px, 1.8vw, 21px); line-height:1.42;
  color:var(--ink-soft); margin-top:16px; max-width:60ch;
}
.nery-comentario .cm-head .rule-short { margin:22px 0 20px; }

/* sumário navegável (índice lateral fixo) */
.nery-comentario .cm-sumario { padding:15px 0 4px; margin:0; }
.nery-comentario .cm-sumario .h { font-family:var(--sans); font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:14px; }
.nery-comentario .cm-sumario ol { list-style:none; margin:0; padding:0; }
.nery-comentario .cm-sumario li { padding:0 0 12px; break-inside:avoid; }
.nery-comentario .cm-sumario li::before { content:none; }
.nery-comentario .cm-sumario a { font-family:var(--sans); font-size:13.5px; font-weight:600; color:var(--ink-soft); display:flex; gap:9px; align-items:baseline; line-height:1.3; transition:color .15s; }
.nery-comentario .cm-sumario a:hover { color:var(--accent); }
.nery-comentario .cm-sumario a .n { color:var(--accent); font-weight:800; font-size:11.5px; flex:none; }
.nery-comentario .cm-sumario a .n::after { content:"|"; color:var(--ink-faint); font-weight:400; margin-left:7px; }
@media (max-width:1039px) {
  .nery-comentario .cm-aside { margin-top:var(--cm-gap); }
  .nery-comentario .cm-sumario { border-bottom:1px solid var(--edge); padding-bottom:8px; margin-bottom:var(--cm-gap); }
  .nery-comentario .cm-sumario ol { columns:2; column-gap:40px; }
}

/* cabeçalho de seção numerado (NN | título) */
.nery-comentario .cm-sec { scroll-margin-top:84px; margin-top:clamp(34.65px,4.158vw,46.2px); }
.nery-comentario .cm-sec > h2 { display:flex; align-items:baseline; gap:13px; font-family:var(--serif); font-size:1.5em; font-weight:600; line-height:1.14; margin:0 0 .55em; padding-top:clamp(34.65px,4.158vw,46.2px); border-top:1px solid var(--edge); }
.nery-comentario .cm-sec > h2 .n { font-family:var(--sans); font-size:.62em; font-weight:800; color:var(--accent); letter-spacing:.02em; flex:none; }
.nery-comentario .cm-sec > h2 .n::after { content:"|"; color:var(--ink-faint); font-weight:400; margin-left:13px; }

/* listas numeradas das seções (NN | automático) */
.nery-comentario .cm-sec ol { counter-reset:li; }
.nery-comentario .cm-sec > ol > li { padding-left:2.9em; }
.nery-comentario .cm-sec > ol > li::before {
  counter-increment:li; content:counter(li, decimal-leading-zero) " |";
  position:absolute; left:0; top:0;
  /* zera o badge CIRCULAR do tema (.body ol>li::before: border+border-radius+w/h) */
  width:auto; height:auto; min-width:0; min-height:0; display:inline; place-items:initial;
  border:0; border-radius:0; background:none; box-shadow:none;
  font-family:var(--sans); font-size:.82em; font-weight:800; color:var(--accent); letter-spacing:.02em;
}

/* riscos — acordeão de linhas (nc_transform_riscos_accordion(), inc/comment-cpt.php,
   converte o .cm-riscos/.cm-risco salvo pelo plugin em .rk-accordion/.rk-row no
   render). Sem caixa, sem borda arredondada, sem bordas laterais — só hairline:
   border-top no container, border-bottom em cada linha. Tokens reaproveitados do
   restante do arquivo: hairline var(--edge), texto secundário var(--ink-faint). */
.nery-comentario .rk-accordion { border-top:1px solid var(--edge); margin:1.5em 0; }
.nery-comentario .rk-row { border-bottom:1px solid var(--edge); }
.nery-comentario .rk-head { display:flex; align-items:center; gap:12px; width:100%; padding:18px 2px; cursor:pointer; background:none; border:none; text-align:left; font:inherit; font-weight:600; color:inherit; }
.nery-comentario .rk-chip { font-family:var(--sans); font-size:12px; font-weight:400; color:var(--ink-faint); margin-left:auto; margin-right:16px; }
.nery-comentario .rk-sign { font-size:20px; width:16px; text-align:center; line-height:1; color:var(--ink-faint); }
.nery-comentario .rk-body { max-height:0; overflow:hidden; transition:max-height .25s ease; }
.nery-comentario .rk-inner { padding:0 2px 18px 2px; }
.nery-comentario .rk-inner ul { margin:0; padding:0; list-style:none; }
.nery-comentario .rk-inner li { font-family:var(--sans); font-size:13.5px; line-height:1.6; color:var(--ink-soft); padding-left:15px; position:relative; margin:6px 0; }
.nery-comentario .rk-inner li::before { content:""; position:absolute; left:0; top:.6em; width:6px; height:6px; background:var(--accent); transform:rotate(45deg); }

/* selo "alto risco" (texto, sem escala/heatmap) */
.nery-comentario .cm-flag { display:inline-flex; align-items:center; gap:8px; font-family:var(--sans); font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--paper); background:var(--accent); padding:5px 13px; border-radius:3px; }

/* cartões de fonte abaixo do parágrafo (até 4 por linha) */
.nery-comentario .cm-srcs { display:flex; flex-wrap:wrap; gap:10px; margin:15px 0 4px; }
.nery-comentario .cm-srcs .h { flex-basis:100%; font-family:var(--sans); font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 3px; }
.nery-comentario .cm-src { flex:0 1 calc((100% - 30px) / 4); min-width:138px; max-width:100%; display:grid; grid-template-columns:24px minmax(0,1fr); gap:9px; align-items:start; border:1px solid var(--edge); background:var(--paper-2); padding:9px 11px; border-radius:7px; overflow:hidden; transition:all .15s; }
.nery-comentario .cm-src:hover { border-color:var(--accent); background:var(--paper); }
/* blinda o cartão contra interferência do tema (sublinhado e ícone de link externo) */
.nery-comentario .cm-src, .nery-comentario .cm-src:hover { text-decoration:none !important; box-shadow:none !important; }
.nery-comentario .cm-src::before, .nery-comentario .cm-src::after { content:none !important; display:none !important; }
.nery-comentario .cm-src .tx b, .nery-comentario .cm-src .tx span { text-decoration:none !important; }
.nery-comentario .cm-src .tx b::after, .nery-comentario .cm-src .tx span::after { content:none !important; display:none !important; }
.nery-comentario .cm-src .ic { width:24px; height:24px; border-radius:6px; background:var(--ink); color:var(--paper); display:grid; place-items:center; font-family:var(--sans); font-weight:700; font-size:10px; flex:none; }
/* Base tipográfica no PRÓPRIO .tx: o texto do cartão fica pequeno mesmo que o
   editor clássico (TinyMCE) ache/achate ou remova o <span> interno da descrição. */
.nery-comentario .cm-src .tx { min-width:0; overflow:hidden; font-family:var(--sans); font-size:11.5px; line-height:1.3; color:var(--ink-faint); }
.nery-comentario .cm-src .tx b { display:block; font-family:var(--sans); font-size:11.5px; font-weight:700; color:var(--ink); line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nery-comentario .cm-src .tx span { font-family:var(--sans); font-size:11.5px; color:var(--ink-faint); line-height:1.3; margin-top:2px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; max-height:2.6em; }
/* blindagem: se o TinyMCE reembrulhar a descrição em <p>/adicionar <br>, mantém o tamanho e o espaçamento do cartão */
.nery-comentario .cm-src .tx p, .nery-comentario .cm-src .tx div { margin:0; font-size:11.5px; line-height:1.3; color:var(--ink-faint); }
.nery-comentario .cm-src .tx br { display:none; }

/* tabela */
.nery-comentario .tbl-wrap { margin:1.6em 0; overflow-x:auto; border:1px solid var(--edge); border-radius:4px; }
.nery-comentario table { width:100%; border-collapse:collapse; font-family:var(--sans); font-size:14.5px; }
.nery-comentario table caption { caption-side:top; text-align:left; font-family:var(--sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); padding:12px 16px; background:var(--paper-2); border-bottom:1px solid var(--edge); }
.nery-comentario thead th { text-align:left; font-weight:700; color:var(--ink); background:var(--paper-2); padding:11px 16px; border-bottom:2px solid var(--ink); }
.nery-comentario tbody td { padding:11px 16px; border-bottom:1px solid var(--edge-soft); color:var(--ink-soft); }
.nery-comentario tbody tr:last-child td { border-bottom:0; }
.nery-comentario tbody tr:hover td { background:var(--accent-wash); }

/* notas (subsídio interno + aviso de links) */
.nery-comentario .cm-nota { margin-top:30px; padding:18px 22px; background:var(--paper-2); border:1px dashed var(--edge); font-family:var(--sans); font-size:12.5px; line-height:1.6; color:var(--ink-faint); }
.nery-comentario .cm-nota b { color:var(--ink-soft); font-weight:700; }
.nery-comentario .cm-nota + .cm-nota { margin-top:14px; }

/* anúncio in-article dentro do corpo do comentário (in-content, antes da 02 e da 07) */
.nery-comentario .nc-inline-ad { margin: clamp(30px, 4vw, 46px) 0; }

/* box fixo de riscos residuais — largura da nota, cores/fontes do bloco de riscos.
   Renderizado pelo tema em TODOS os comentários (texto fixo, não vem do JSON). */
.nery-comentario .cm-residual { border:1px solid var(--edge); background:var(--paper-2); padding:clamp(18px,2.4vw,24px) clamp(20px,2.8vw,28px); margin-top:var(--cm-gap); }
.nery-comentario .cm-residual .rl { font-family:var(--sans); font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--accent); margin-bottom:11px; padding-bottom:9px; border-bottom:1px solid var(--edge); }
.nery-comentario .cm-residual p { font-family:var(--sans); font-size:13.5px; line-height:1.48; color:var(--ink-soft); margin:0; }

/* byline com múltiplos autores — avatares sobrepostos (só na página de Comentário).
   !important garante a sobreposição mesmo se outra regra do tema pegar o container. */
.byline .avatars { display:flex !important; align-items:center; }
.byline .avatars .avatar { border:2px solid var(--paper); }
.byline .avatars .avatar + .avatar { margin-left:-12px !important; }

@media (max-width:720px) {
  .nery-comentario .cm-sumario ol { columns:1; }
}
