/* ═══════════════════════════════════════════════════════════════════════
   overlay-2col.css · camada "DAS BLACK 2 COL" do Panda Desk overlay
   Carregada DEPOIS de tokens.css e overlay.css (index.html + overlay.html,
   em lockstep). ADITIVA: toda regra é prefixada por html[data-layout="2col"]
   — sem o atributo (o modo "single" de produção) NENHUMA regra daqui liga e
   a página é byte-idêntica a hoje. O atributo é flipado por
   PandaOverlay.applyLayout (host cmd set_layout), que também realoca os nós:
   #insightView vira o último filho de #ovlScroll e #aiInsightBtn vira a
   faixa de cabeçalho do painel. Origem do desenho: design-sync/handoff_2col/
   (overlay-2col.css do pacote), validado no probe F0 (P4) a 500/660/720px.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1 · AI INSIGHT inline (qualquer largura, sempre que layout=2col) ────
   O nó realocado herda .stage-view{position:absolute;inset:0;translateX}
   do overlay.css:132/138 — neutralizado aqui. Ganha a moldura dos outros
   painéis: borda 1px + faixa de cabeçalho (o próprio #aiInsightBtn), com
   "• Nm ago / 🔄 Reload" à direita da MESMA faixa (.insight-header absoluto
   sobre a linha do botão). */
html[data-layout="2col"] #insightView.stage-view { position: relative; inset: auto; transform: none; transition: none; display: block; border: 1px solid var(--news-lts-border); background: var(--bg); overflow: hidden; margin-top: 12px; }
html[data-layout="2col"] #insightView .insight-scroll { overflow: visible; flex: none; }
html[data-layout="2col"] #insightView .insight-accordion { padding: 6px; }
html[data-layout="2col"] #insightView .ins-section:first-child { margin-top: 0; }
/* faixa de cabeçalho = o botão que veio da barra score/setor */
html[data-layout="2col"] #insightView #aiInsightBtn { display: flex; width: 100%; margin: 0; padding: 3px 6px; min-height: 22px; background: var(--news-lts-hdr-bg); }
/* idade + reload à direita da MESMA faixa */
html[data-layout="2col"] #insightView .insight-header { position: absolute; top: 0; right: 6px; height: 22px; padding: 0; gap: 8px; }
html[data-layout="2col"] #insightView .insight-age { padding-left: 0; }
html[data-layout="2col"] #insightView .insight-reload { margin: 0; padding-right: 0; }
/* cabeçalho de seção com 2 pills estoura por poucos px em coluna estreita:
   o título fica inteiro e a pill longa é que encolhe */
html[data-layout="2col"] #insightView .ins-sec-title { flex: none; }
html[data-layout="2col"] #insightView .ins-sec-right { min-width: 0; flex: 0 1 auto; justify-content: flex-end; }
html[data-layout="2col"] #insightView .ins-pill { flex: 0 1 auto; }
html[data-layout="2col"] #insightView .ins-pill:last-child { flex: 0 0 auto; }
html[data-layout="2col"] #insightView .ins-pill, html[data-layout="2col"] #insightView .ins-sec-peek { min-width: 0; overflow: hidden; text-overflow: ellipsis; display: block; }
/* nome da empresa no slot do score: nunca empurra o setor — encolhe com "…" */
html[data-layout="2col"] .score-label { min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: 8px; }

/* ── 2 · duas colunas a partir de 640px de janela ────────────────────────
   Abaixo disso o overlay segue em coluna única (o layout de produção), com o
   painel Insight inline no pé — validado no probe a 500px. Multicol com
   quebra forçada: coluna 1 = números e risco, coluna 2 = narrativa, news e
   AI INSIGHT. O scroll vertical passa para .ticker-view (o multicol precisa
   de altura AUTO para balancear; num fragmentainer de altura fixa ele
   transbordaria horizontal — armadilha do overlay.css:147). */
@media (min-width: 640px) {
  html[data-layout="2col"] .ticker-view { overflow-y: auto; overflow-x: hidden; }
  /* barra de rolagem = a MESMA do layout de produção (overlay.css:151-152):
     7px, trilho transparente, polegar --border-strong. Sem isto o scroller
     que mudou de nó (#ovlScroll → .ticker-view) cai na barra NATIVA larga do
     WebView2 (trilho claro + setas), que destoa do resto do overlay. */
  html[data-layout="2col"] .ticker-view::-webkit-scrollbar { width: 7px; }
  html[data-layout="2col"] .ticker-view::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
  html[data-layout="2col"] #ovlScroll {
    height: auto; overflow: visible;
    columns: 2; column-gap: 12px; column-fill: balance;
    column-rule: 1px solid var(--border);
    padding: 0 6px 8px;
  }
  html[data-layout="2col"] #ovlScroll > * { break-inside: avoid; }
  /* a coluna 2 começa no WHY: números e risco na 1, narrativa/news/AI na 2 */
  html[data-layout="2col"] .why-section { break-before: column; }

  /* ritmo vertical único: 12px entre blocos, 6px no topo de cada coluna
     (em produção variava 4/10/12/14px e o topo desalinhava 6px) */
  html[data-layout="2col"] #ovlScroll > * { margin-top: 12px; margin-bottom: 0; }
  html[data-layout="2col"] .metrics-grid, html[data-layout="2col"] .why-section { margin-top: 6px; }

  /* travas anti-quebra: mesmos textos, só não embrulham quando falta 1-2px */
  html[data-layout="2col"] .ai-insight-btn, html[data-layout="2col"] .news-hdr-title,
  html[data-layout="2col"] .overall-label, html[data-layout="2col"] .fin-name { white-space: nowrap; }
  html[data-layout="2col"] .sector-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* FILINGS (BLOCK 11b, Ticker Intel): o título trava como os outros cabeçalhos.
     O bloco em si NÃO precisa de regra própria — é filho direto de #ovlScroll e
     herda `#ovlScroll > *` (break-inside: avoid + ritmo 12px) acima; segue o WHY
     na coluna 2 e NÃO leva break-before (abriria uma 3ª coluna). Escondido
     ([hidden]) some do fluxo multicol sem deixar o gap de 12px. */
  html[data-layout="2col"] .filings-section .section-title { white-space: nowrap; }
  /* WHY header com o badge de origem (Ticker Intel): numa coluna de ~337px o
     título "POR QUE ESTÁ MEXENDO (10:01 HOJE)" (~200px) + "⚡ PANDA AI
     analisando…" (~150px) + "✓ CATALYST" não cabem numa linha — o flex
     ENCOLHIA o título a 48px ("POR…", medido no DOM a 720px). Deixa a faixa
     QUEBRAR: o título fica inteiro na 1ª linha e badge/catalyst descem para a
     2ª quando faltar espaço (a 900px cabe tudo numa linha). Sem badge (produção
     sem intel) nada muda: título + catalyst cabem como antes. */
  html[data-layout="2col"] .why-section .section-hdr { flex-wrap: wrap; row-gap: 2px; }

  /* ── trilho ajustável (dono 03-09, handoff §3.3) ───────────────────────
     A alça #railHandle é criada por overlay.js dentro de #ovlScroll (o HTML
     congelado não a tem) e reescreve a variável --rail inline — as folhas
     overlay-cards.css / overlay-terminal.css leem a mesma variável para a
     largura da coluna de fatos, a margem da leitura e o filete do vão. Aqui só
     a caixa: absoluta, do topo ao pé do #ovlScroll (o JS posiciona o `left` no
     meio do vão a partir dos rects), 8px de pega, cursor col-resize; cor só no
     hover/arrasto, em --accent (não é IA — cor só por significado). */
  html[data-layout="2col"] #ovlScroll { position: relative; }
  /* `#ovlScroll > #railHandle` (2 ids) vence o ritmo `#ovlScroll > * { margin-top }`
     das folhas (1 id): a alça é o 1º filho e não pode herdar os 12-14px */
  html[data-layout="2col"] #ovlScroll > #railHandle {
    position: absolute; top: 0; bottom: 0; width: 8px; margin: 0 0 0 -4px;
    cursor: col-resize; z-index: 5; background: transparent; border-radius: 4px;
    touch-action: none; break-inside: avoid;
  }
  html[data-layout="2col"] #railHandle:hover,
  html[data-layout="2col"] #railHandle.drag { background: color-mix(in srgb, var(--accent) 30%, transparent); }
  html[data-layout="2col"] #ovlScroll.rail-dragging { user-select: none; }
}
/* abaixo de 640px a página é coluna única: a alça nunca aparece (o JS também a esconde) */
@media (max-width: 639px) {
  html[data-layout="2col"] #railHandle { display: none !important; }
}

/* ── 3 · coluna estreita (640–699px de janela ≈ <340px por coluna) ───────
   3 colunas de métrica e 2 de financeiro só cabem a partir de ~340px de
   coluna; entre 640 e 699 a grade reconta para não cortar "R/S 1:8" e
   "$2.8M/mo" (validado no probe a 660px). */
@media (min-width: 640px) and (max-width: 699px) {
  html[data-layout="2col"] .metrics-grid { grid-template-columns: 1fr 1fr; }
  html[data-layout="2col"] .fin-grid { grid-template-columns: 1fr; }
}