/* ==========================================================================
   COMPARADOR DE CENÁRIOS — prefixo duo-cmp-
   Dois controles de faixa, oito barras verticais em quatro marcos de tempo,
   a leitura em números do horizonte escolhido e a tabela com o custo
   acumulado. Compara CUSTO entre dois modelos de remuneração — nunca
   resultado (ver o cabeçalho do markup.html).

   O prefixo é duo-cmp- e não duo-: duo- já é do conteudo/imagem-lista-numerada,
   e duas classes .duo-item na mesma página colidiriam em silêncio.

   Tokens usados:
     --max --pad          só via .wrap, que o markup usa — nada aqui mexe na coluna
     --sec-gap            respiro da dobra, via .sec-pad do core
     --display --sans     tipografia
     --ease               curva única do projeto
     --radius-media       raio do painel
     --radius-pill        trilho e botão da faixa
     --accent             série da taxa acordada, trilho preenchido, foco
     --bg --fg --fg-2 --fg-muted --rule --rule-2   do escopo .sec-dark da seção

   AS DUAS CORES DE SÉRIE SÃO VARIÁVEIS DO PREFIXO e leem token: a taxa
   acordada é a cor de ação do tema, a comissão é o cinza de apoio. Elas
   separam por LUMINÂNCIA, não só por matiz (sage claro contra cinza médio),
   e é isso que mantém as duas séries distinguíveis em tela monocromática —
   o rótulo em texto e a tabela fecham o resto.
   ========================================================================== */

.duo-cmp{
  /* ---- Séries. Trocar aqui troca barra, quadradinho da legenda e número. */
  --duo-cmp-fee:var(--accent);
  --duo-cmp-com:color-mix(in srgb,var(--fg-muted) 88%,transparent);

  /* ---- Painel ---- */
  --duo-cmp-pad:clamp(20px,2.4vw,34px);       /* respiro interno do painel */
  --duo-cmp-radius:var(--radius-media);
  --duo-cmp-aside:clamp(240px,24vw,320px);    /* coluna da leitura, à direita */
  --duo-cmp-col-gap:clamp(24px,3vw,44px);

  /* ---- Controles ---- */
  --duo-cmp-track:6px;                        /* espessura do trilho */
  --duo-cmp-thumb:20px;                       /* diâmetro do botão da faixa */

  /* ---- Quadro ----
     A altura do quadro é só das barras: o rótulo do marco fica abaixo dela,
     e a linha de base é desenhada exatamente nesta medida (ver ::before). */
  --duo-cmp-plot-h:clamp(180px,19vw,260px);
  --duo-cmp-bar-w:clamp(18px,3vw,44px);       /* largura de cada barra */
  --duo-cmp-bar-gap:clamp(4px,.6vw,9px);      /* vão entre as duas do par */
  --duo-cmp-group-gap:clamp(10px,1.6vw,26px); /* vão entre marcos */
  --duo-cmp-grow:.7s;                         /* crescimento na entrada */
  --duo-cmp-move:.45s;                        /* mudança depois do primeiro toque */
}

/* ============================================================ painel */
.duo-cmp-panel{
  margin-top:clamp(30px,3.6vw,52px);
  padding:var(--duo-cmp-pad);
  border:1px solid var(--rule);
  border-radius:var(--duo-cmp-radius);
  /* 4% do texto sobre o fundo da própria seção: em .sec-dark levanta o
     painel do preto, em .sec-light o abaixa do creme. Uma regra, dois tons. */
  background:color-mix(in srgb,var(--fg) 4%,transparent);
}

/* ============================================================ controles */
/* O <fieldset> nasce disabled no markup e o script o libera — sem script,
   os controles ficam visivelmente inertes em vez de se mexerem à toa. */
.duo-cmp-fields{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,2.6vw,40px);
  margin:0;padding:0;border:0;
}

.duo-cmp-fields-title{
  padding:0;
  margin-bottom:clamp(14px,1.4vw,20px);
  font-family:var(--display);
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-muted);
}

.duo-cmp-field{min-width:0}

.duo-cmp-field-top{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin-bottom:10px;
}

.duo-cmp-label{font-size:15px;color:var(--fg-2)}

.duo-cmp-out{
  font-family:var(--display);
  font-size:clamp(17px,1.5vw,20px);
  color:var(--fg);
  font-variant-numeric:tabular-nums;
  /* "R$ 5 mi" quebrando entre o 5 e o mi lê como dois valores. */
  white-space:nowrap;
}

/* ---- a faixa ----
   O trilho é pintado com um degradê de duas paradas na mesma posição:
   preenchido até --duo-cmp-p, vazio depois. A fração vem do style inline
   (escrita no markup para o estado padrão, atualizada pelo script). */
.duo-cmp-range{
  -webkit-appearance:none;appearance:none;
  display:block;width:100%;height:var(--duo-cmp-thumb);
  margin:0;padding:0;background:transparent;cursor:pointer;
}

.duo-cmp-range::-webkit-slider-runnable-track{
  height:var(--duo-cmp-track);border-radius:var(--radius-pill);
  background:linear-gradient(to right,
    var(--accent) 0 calc(var(--duo-cmp-p,0) * 100%),
    var(--rule-2) calc(var(--duo-cmp-p,0) * 100%) 100%);
}
.duo-cmp-range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:var(--duo-cmp-thumb);height:var(--duo-cmp-thumb);
  border:0;border-radius:var(--radius-pill);
  background:var(--accent);
  /* centra o botão no trilho, seja qual for a espessura dos dois */
  margin-top:calc((var(--duo-cmp-track) - var(--duo-cmp-thumb)) / 2);
  transition:transform .2s var(--ease);
}
.duo-cmp-range:hover::-webkit-slider-thumb{transform:scale(1.12)}

/* O Firefox tem trilho e progresso separados — não aceita o degradê acima. */
.duo-cmp-range::-moz-range-track{
  height:var(--duo-cmp-track);border-radius:var(--radius-pill);
  background:var(--rule-2);
}
.duo-cmp-range::-moz-range-progress{
  height:var(--duo-cmp-track);border-radius:var(--radius-pill);
  background:var(--accent);
}
.duo-cmp-range::-moz-range-thumb{
  width:var(--duo-cmp-thumb);height:var(--duo-cmp-thumb);
  border:0;border-radius:var(--radius-pill);
  background:var(--accent);
}

/* Estado sem script: inerte à vista, e o cursor não promete interação. */
.duo-cmp-range:disabled{opacity:.42;cursor:not-allowed}

@media(prefers-reduced-motion:reduce){
  .duo-cmp-range::-webkit-slider-thumb{transition:none}
  .duo-cmp-range:hover::-webkit-slider-thumb{transform:none}
}

.duo-cmp-ends{
  display:flex;justify-content:space-between;gap:12px;
  margin-top:8px;
  font-size:12px;letter-spacing:.06em;color:var(--fg-muted);
}

.duo-cmp-end{white-space:nowrap}

/* Só aparece quando o fieldset continua disabled — isto é, quando o script
   não rodou. Irmão imediato: a ordem no markup é fieldset e depois o aviso. */
.duo-cmp-fallback{display:none}
.duo-cmp-fields:disabled + .duo-cmp-fallback{
  display:block;
  margin-top:16px;font-size:14px;color:var(--fg-muted);
}

/* ============================================================ grade do miolo */
.duo-cmp-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) var(--duo-cmp-aside);
  gap:var(--duo-cmp-col-gap);
  margin-top:clamp(26px,3vw,44px);
}

.duo-cmp-chart{min-width:0}

.duo-cmp-chart-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;flex-wrap:wrap;
  margin-bottom:clamp(16px,1.8vw,24px);
}

.duo-cmp-keys{
  display:flex;flex-wrap:wrap;gap:8px 22px;
  margin:0;padding:0;list-style:none;
}
.duo-cmp-key{
  display:flex;align-items:center;gap:9px;
  font-size:14px;color:var(--fg-2);
}
.duo-cmp-swatch{
  width:12px;height:12px;flex:0 0 auto;
  border-radius:calc(var(--radius-media) / 2);
}
.duo-cmp-swatch-fee{background:var(--duo-cmp-fee)}
.duo-cmp-swatch-com{background:var(--duo-cmp-com)}

.duo-cmp-scale{
  margin:0;font-size:13px;color:var(--fg-muted);white-space:nowrap;
}
.duo-cmp-scale-v{
  color:var(--fg-2);font-variant-numeric:tabular-nums;
}

/* ---- o quadro ----
   Os grupos têm todos a mesma altura (barras + rótulo), então a linha de
   base e as duas linhas de grade podem ser uma camada só, presa ao topo com
   a altura das barras. Desenhar a base como border-bottom de cada grupo
   daria quatro segmentos com buracos entre eles. */
.duo-cmp-plot{
  position:relative;
  display:flex;align-items:flex-end;
  gap:var(--duo-cmp-group-gap);
}
.duo-cmp-plot::before{
  content:"";position:absolute;left:0;right:0;top:0;
  height:var(--duo-cmp-plot-h);
  border-bottom:1px solid var(--rule-2);
  background-image:linear-gradient(var(--rule),var(--rule)),
                   linear-gradient(var(--rule),var(--rule));
  background-repeat:no-repeat;
  background-size:100% 1px,100% 1px;
  background-position:0 0,0 50%;
  pointer-events:none;
}

.duo-cmp-group{
  flex:1 1 0;min-width:0;
  display:flex;flex-direction:column;
}
/* O display acima é regra de autor e venceria o [hidden] da folha do
   navegador, que é de origem mais fraca. Sem esta linha, esconder um marco
   pelo atributo não faria nada. */
.duo-cmp-group[hidden]{display:none}

.duo-cmp-bars{
  height:var(--duo-cmp-plot-h);
  display:flex;align-items:flex-end;justify-content:center;
  gap:var(--duo-cmp-bar-gap);
}

/* A barra ocupa o quadro inteiro e é ESCALADA a partir da base: assim a
   altura é uma fração pura de 0 a 1, sem conta de pixel em lugar nenhum, e
   o crescimento anima em composição (sem reflow). O atraso da entrada vem do
   style inline; o script o zera no primeiro toque, senão o gráfico
   responderia com meio segundo de sono a cada movimento da faixa. */
.duo-cmp-bar{
  display:block;
  width:var(--duo-cmp-bar-w);height:100%;
  transform:scaleY(0);transform-origin:bottom;
  transition:transform var(--duo-cmp-grow) var(--ease);
  transition-delay:var(--duo-cmp-d,0s);
}
.duo-cmp-bar-fee{background:var(--duo-cmp-fee)}
.duo-cmp-bar-com{background:var(--duo-cmp-com)}

/* .in é do core (o data-rv do quadro). .is-live é do script, no primeiro
   toque nos controles — as duas soltam a barra, para que tabular até o
   controle antes de o quadro entrar em cena não deixe o gráfico zerado. */
.duo-cmp-plot.in .duo-cmp-bar,
.duo-cmp-plot.is-live .duo-cmp-bar{transform:scaleY(var(--duo-cmp-h,0))}
.duo-cmp-plot.is-live .duo-cmp-bar{
  transition-delay:0s;
  transition-duration:var(--duo-cmp-move);
}

/* Especificidade igual à das duas regras acima, e depois delas: sem isso o
   .is-live devolveria uma duração ao que aqui se quer parado. */
@media(prefers-reduced-motion:reduce){
  .duo-cmp-plot .duo-cmp-bar{
    transform:scaleY(var(--duo-cmp-h,0));
    transition:none;
  }
}

.duo-cmp-mark{
  padding-top:10px;
  text-align:center;
  font-size:13px;letter-spacing:.04em;color:var(--fg-muted);
  white-space:nowrap;
}

/* ============================================================ leitura */
.duo-cmp-read{
  min-width:0;
  display:flex;flex-direction:column;
  align-self:start;
}

.duo-cmp-read-head{
  margin:0 0 18px;
  font-size:14px;color:var(--fg-muted);
}
.duo-cmp-read-em{color:var(--fg-2)}

.duo-cmp-stat{
  display:flex;flex-direction:column;gap:2px;
  padding:12px 0;
  border-top:1px solid var(--rule);
}
.duo-cmp-stat-k{font-size:13px;color:var(--fg-muted)}
.duo-cmp-stat-v{
  font-family:var(--display);
  font-size:clamp(22px,2.2vw,30px);line-height:1.1;
  /* Sem tabular-nums o número dança de largura enquanto conta. */
  font-variant-numeric:tabular-nums;
}
.duo-cmp-stat-fee{color:var(--duo-cmp-fee)}
.duo-cmp-stat-com{color:var(--duo-cmp-com)}

/* A diferença é o argumento: linha mais forte e número em cor de texto. */
.duo-cmp-stat-gap{border-top-color:var(--rule-2)}

.duo-cmp-premissas{
  margin:18px 0 0;
  font-size:12px;line-height:1.55;color:var(--fg-muted);
}
.duo-cmp-premissas-k{
  display:block;
  margin-bottom:4px;
  font-family:var(--display);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-2);
}
.duo-cmp-premissas-v{color:var(--fg-2);font-variant-numeric:tabular-nums}

.duo-cmp-cta{margin-top:20px;align-self:start;justify-self:start}

/* ============================================================ tabela */
/* Quatro colunas de número não encolhem abaixo do conteúdo. Abaixo de ~340px
   a tabela passaria por cima da borda do painel; aqui ela rola dentro da
   própria caixa, que é o comportamento que o contrato pede para conteúdo
   largo. */
.duo-cmp-scroll{
  margin-top:clamp(26px,3vw,44px);
  overflow-x:auto;
}
.duo-cmp-table{
  width:100%;
  border-collapse:collapse;
  font-variant-numeric:tabular-nums;
}
.duo-cmp-cap{
  margin-bottom:12px;
  text-align:left;
  font-size:12px;letter-spacing:.06em;color:var(--fg-muted);
}
.duo-cmp-th{
  padding:10px 14px 10px 0;
  text-align:right;vertical-align:bottom;
  font-family:var(--display);font-weight:400;
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--fg-muted);
  border-bottom:1px solid var(--rule-2);
}
.duo-cmp-th:first-child{text-align:left}
.duo-cmp-rh{
  padding:12px 14px 12px 0;
  text-align:left;font-weight:400;
  font-size:14px;color:var(--fg-2);
  border-bottom:1px solid var(--rule);
  /* "ano 20" quebrando em duas linhas desalinha a fila inteira em tela
     estreita — e é justamente onde a tabela é a leitura principal. */
  white-space:nowrap;
}
.duo-cmp-td{
  padding:12px 14px 12px 0;
  text-align:right;
  font-size:15px;color:var(--fg-2);
  border-bottom:1px solid var(--rule);
  /* Valor não quebra: em vez de espremer "R$ 270 mil" em duas linhas, a
     tabela cresce e rola dentro do .duo-cmp-scroll. */
  white-space:nowrap;
}
.duo-cmp-td:last-child{padding-right:0}
.duo-cmp-td-gap{color:var(--fg)}

/* ============================================================ ressalva */
/* Tipografia pela primitiva .nota do core; margem e medida ficam aqui — 78ch
   acompanha a largura da tabela de leitura logo acima. */
.duo-cmp-nota{
  margin:clamp(20px,2.2vw,30px) 0 0;
  --nota-max:78ch;
}

/* Só para leitor de tela: o anúncio do resultado depois que o arrasto para.
   clip-path e não clip: clip está obsoleto e clip-path não cria caixa de
   rolagem no pai. */
.duo-cmp-sr{
  position:absolute;
  width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;white-space:nowrap;border:0;
  clip-path:inset(50%);
}

/* ==========================================================================
   MOBILE — no fim do arquivo, como manda o §6.5
   ========================================================================== */

@media(max-width:900px){
  .duo-cmp-grid{grid-template-columns:minmax(0,1fr)}
  /* A leitura desce para debaixo do quadro e vira uma fila de três blocos,
     que é o formato que cabe numa coluna larga sem virar lista solta. */
  .duo-cmp-read{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:0 clamp(16px,2.4vw,30px);
    align-items:start;
  }
  .duo-cmp-read-head{grid-column:1 / -1}
  .duo-cmp-premissas{grid-column:1 / -1}
  .duo-cmp-cta{grid-column:1 / -1}
}

@media(max-width:640px){
  .duo-cmp-fields{grid-template-columns:minmax(0,1fr)}
  .duo-cmp-read{grid-template-columns:minmax(0,1fr)}
  .duo-cmp-stat{padding:10px 0}
}

/* Abaixo de 560 o quadro passa a três marcos — quem decide é o script, que
   observa a mesma largura. Aqui só encolhem o quadro e a tabela. */
@media(max-width:560px){
  .duo-cmp{
    --duo-cmp-plot-h:170px;
    --duo-cmp-bar-w:clamp(22px,7vw,40px);
    --duo-cmp-group-gap:8px;
  }
  .duo-cmp-th{font-size:11px;letter-spacing:.06em;padding-right:8px}
  .duo-cmp-td,.duo-cmp-rh{font-size:13px;padding-right:8px}
  .duo-cmp-nota{--nota-size:12px}
}