/* ==========================================================================
   TABELA COMPARATIVA — prefixo tab-cmp-
   Matriz de três modelos de serviço: critérios nas linhas, modelos nas
   colunas, um disco de estado e uma frase curta em cada célula. Compara
   MODELO e CUSTO, nunca resultado (ver o cabeçalho do markup.html).

   O prefixo é tab-cmp- e não cmp-: cmp- já é do midia/comparador-antes-depois,
   e duas .cmp-linha na mesma página colidiriam em silêncio. O
   dados/comparador-cenarios resolveu o mesmo problema virando duo-cmp-.

   Tokens usados:
     --max --pad          só via .wrap do core — nada aqui mexe na coluna
     --sec-gap            respiro da dobra, via .sec-pad
     --display --sans     tipografia
     --ease               curva única do projeto
     --radius-media       canto do card no celular
     --radius-pill        o disco de estado
     --accent             filete e tinta da coluna em destaque, disco cheio
     --bg --fg --fg-2 --fg-muted --rule --rule-2   do escopo .sec-deep da seção

   É UMA <table> DE VERDADE, e por isso este arquivo estiliza CÉLULA POR
   CLASSE em vez de por elemento: o §6.3 do contrato proíbe seletor de
   elemento solto, e `td{}` numa folha que pode ser colada em qualquer
   posição vazaria para toda tabela da página. São poucas linhas a mais.

   O DISCO SEPARA POR PREENCHIMENTO, NÃO POR MATIZ (cheio, meio, vazio).
   Quem não distingue as cores continua lendo os três estados — e ao lado
   dele há sempre a palavra, no markup.
   ========================================================================== */

.tab-cmp{
  /* Abaixo desta largura a tabela rola dentro do próprio contêiner em vez
     de espremer quatro colunas de texto até a ilegibilidade. É também o que
     faz o .tab-cmp-rolo ganhar foco de teclado em tela média.

     O número tem de ser MAIOR que a coluna disponível na largura em que os
     cards acabam (760px), senão a faixa de rolagem não existe: entre 761px e
     ~900px de janela a coluna do .wrap fica entre 685 e 780px, e é aí que
     esta medida decide se a tabela rola ou se as células espremem. */
  --tab-cmp-min:760px;

  --tab-cmp-pad-x:clamp(12px,1.4vw,22px);
  --tab-cmp-pad-y:clamp(14px,1.5vw,20px);
  --tab-cmp-dot:15px;                        /* diâmetro do disco de estado */

  /* Tinta da coluna em destaque, e a mesma tinta um passo acima no hover.
     Percentual sobre transparente: funciona igual em .sec-dark e .sec-paper. */
  --tab-cmp-forte-bg:color-mix(in srgb,var(--accent) 6%,transparent);
  --tab-cmp-forte-on:color-mix(in srgb,var(--accent) 13%,transparent);

  /* A linha acesa. A versão OPACA existe para a primeira coluna, que é
     sticky: translúcida, o conteúdo rolado apareceria por baixo dela. */
  --tab-cmp-linha-on:color-mix(in srgb,var(--fg) 6%,transparent);
  --tab-cmp-fixa-on:color-mix(in srgb,var(--fg) 6%,var(--bg));

  --tab-cmp-card-gap:clamp(18px,5vw,26px);   /* vão entre cards, no celular */
}

/* ============================================================ premissa e nota */
/* A premissa é o alvo do aria-describedby da tabela: dizer o que está sendo
   comparado é parte da peça, não nota de rodapé. */
.tab-cmp-premissa{
  margin:clamp(28px,3.4vw,46px) 0 clamp(16px,1.8vw,24px);
  max-width:70ch;
  font-size:14px;line-height:1.6;color:var(--fg-2);
}
/* Tipografia pela primitiva .nota do core; margem e medida ficam aqui — 78ch
   acompanha a largura da tabela que a ressalva cobre. */
.tab-cmp-nota{
  margin:clamp(18px,2vw,28px) 0 0;
  --nota-max:78ch;
}

/* ============================================================ contêiner */
/* Rola na horizontal quando a tabela não cabe. Nasce com tabindex="0" no
   markup (quem navega só por teclado precisa alcançar a caixa para rolá-la);
   o script.js tira o tabindex quando não há transbordo. */
.tab-cmp-rolo{overflow-x:auto}

/* ============================================================ tabela */
.tab-cmp-tabela{
  width:100%;
  min-width:var(--tab-cmp-min);
  /* separate e não collapse: com collapse as bordas passam a ser da TABELA,
     e uma <tr> que carrega filter (o [data-rv] do core termina em blur(0),
     que continua sendo filtro) pinta a linha numa superfície própria — as
     bordas colapsadas saem serrilhadas na costura. Com separate a borda é da
     célula e acompanha a linha. */
  border-collapse:separate;
  border-spacing:0;
  /* fixed: as quatro colunas param de dançar conforme o texto de cada
     célula. A largura sai só da primeira linha, e é a do .tab-cmp-canto. */
  table-layout:fixed;
  text-align:left;
}

/* ---- cabeçalho de coluna ---- */
.tab-cmp-canto,
.tab-cmp-coluna{
  padding:0 var(--tab-cmp-pad-x) clamp(12px,1.3vw,18px);
  vertical-align:bottom;
  font-weight:400;
  border-bottom:1px solid var(--rule-2);
}
.tab-cmp-canto{
  width:23%;
  padding-left:0;
  font-family:var(--sans);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-muted);
  /* A coluna de critério fica parada enquanto o resto rola: sem ela à vista,
     uma célula no meio da rolagem não diz de que critério é. */
  position:sticky;left:0;z-index:2;
  background:var(--bg);
}
.tab-cmp-coluna-nome{
  display:block;
  font-family:var(--display);font-weight:700;letter-spacing:-.01em;
  font-size:clamp(14px,1.15vw,16px);line-height:1.25;
  color:var(--fg);
}
.tab-cmp-coluna-nota{
  display:block;margin-top:6px;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-muted);
}

/* ---- cabeçalho de linha ---- */
.tab-cmp-criterio{
  padding:var(--tab-cmp-pad-y) var(--tab-cmp-pad-x) var(--tab-cmp-pad-y) 0;
  vertical-align:top;
  font-family:var(--sans);font-weight:400;
  font-size:14px;line-height:1.4;color:var(--fg);
  border-bottom:1px solid var(--rule);
  position:sticky;left:0;z-index:1;
  background:var(--bg);
  transition:background .28s var(--ease);
}

/* ---- célula ---- */
.tab-cmp-cel{
  padding:var(--tab-cmp-pad-y) var(--tab-cmp-pad-x);
  vertical-align:top;
  border-bottom:1px solid var(--rule);
  transition:background .28s var(--ease);
}
.tab-cmp-cel-3{padding-right:0}

/* ---- disco de estado + palavra ---- */
/* O flex mora num <span> dentro da célula, nunca na própria célula: dar
   display:flex a um <td> tira dele o display:table-cell e a tabela inteira
   desmonta. */
.tab-cmp-topo{display:flex;align-items:center;gap:9px}
.tab-cmp-marca{
  flex:0 0 auto;
  width:var(--tab-cmp-dot);height:var(--tab-cmp-dot);
  border-radius:var(--radius-pill);
  border:1px solid var(--accent);
}
.tab-cmp-marca-sim{background:var(--accent)}
.tab-cmp-marca-meio{background:linear-gradient(90deg,var(--accent) 0 50%,transparent 50%)}
.tab-cmp-marca-nao{border-color:var(--rule-2);background:none}
.tab-cmp-sinal{
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-muted);
}
.tab-cmp-valor{
  display:block;margin-top:9px;
  font-size:13.5px;line-height:1.5;color:var(--fg-2);
}

/* ---- coluna em destaque ---- */
/* Mover o destaque para outra coluna é mover a classe .tab-cmp-forte no
   markup — nada aqui conhece a posição dela. */
.tab-cmp-forte{background:var(--tab-cmp-forte-bg)}
.tab-cmp-coluna.tab-cmp-forte{border-top:2px solid var(--accent)}

/* ============================================================ linha acesa */
/* Em tabela larga o olho perde a horizontal entre a primeira coluna e a
   última. A linha inteira acende — inclusive a coluna sticky, que precisa da
   versão opaca da tinta para continuar cobrindo o que passa por baixo.
   :focus-within cobre o caso de a célula ganhar um link no futuro.
   Fora de @media(hover:hover) isto viraria estado grudado no toque. */
@media(hover:hover){
  .tab-cmp-linha:hover .tab-cmp-cel,
  .tab-cmp-linha:focus-within .tab-cmp-cel{background:var(--tab-cmp-linha-on)}
  .tab-cmp-linha:hover .tab-cmp-criterio,
  .tab-cmp-linha:focus-within .tab-cmp-criterio{background:var(--tab-cmp-fixa-on)}
  /* depois das duas de cima, de propósito: mesma especificidade, e a coluna
     em destaque tem de continuar distinta com a linha acesa. */
  .tab-cmp-linha:hover .tab-cmp-forte,
  .tab-cmp-linha:focus-within .tab-cmp-forte{background:var(--tab-cmp-forte-on)}
}

/* ============================================================ escalonamento */
/* O core escalona três degraus ([data-rv][data-d="1..3"]) e a tabela tem
   sete linhas. Aqui a escada continua, no MESMO passo de 80ms, por atributo
   próprio — e por atributo, não por classe, para o seletor valer (0,2,0) e
   empatar com o do core em vez de perder para ele.

   Por que não usar data-d nas três primeiras e este nas outras quatro: as
   duas regras teriam a mesma especificidade e a ordem de carregamento
   decidiria — que é exatamente a dependência que o §6.4 proíbe. Ou tudo
   daqui, ou tudo do core. */
.tab-cmp-linha[data-tab-cmp-passo="1"]{transition-delay:.08s}
.tab-cmp-linha[data-tab-cmp-passo="2"]{transition-delay:.16s}
.tab-cmp-linha[data-tab-cmp-passo="3"]{transition-delay:.24s}
.tab-cmp-linha[data-tab-cmp-passo="4"]{transition-delay:.32s}
.tab-cmp-linha[data-tab-cmp-passo="5"]{transition-delay:.40s}
.tab-cmp-linha[data-tab-cmp-passo="6"]{transition-delay:.48s}
.tab-cmp-linha[data-tab-cmp-passo="7"]{transition-delay:.56s}

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

   A TABELA VIRA CARDS, UM POR COLUNA. O DOM é por linha (critério, valor,
   valor, valor) e o card é por coluna — ou seja, a virada é uma TRANSPOSIÇÃO.
   Ela sai de três peças, e nenhuma delas precisa saber quantas linhas a
   tabela tem:

     1. display:contents em <thead>, <tbody> e <tr> derruba as caixas de
        linha, e as células viram filhas diretas do grid da <table>;
     2. order:1|2|3 por coluna agrupa as células da mesma coluna — itens de
        mesmo `order` mantêm a ordem do documento entre si, então cada grupo
        sai na ordem dos critérios, e o cabeçalho da coluna (que vem antes no
        DOM) encabeça o grupo;
     3. o rótulo de cada valor vem de content:attr(data-tab-cmp-criterio),
        sem duplicar o bloco no markup.

   O CARD NÃO É UMA CAIXA, é a costura de suas peças: a borda de cima e as
   laterais nascem no cabeçalho da coluna, as laterais seguem nas células, e
   a última linha fecha embaixo. Grupo de itens de grid não tem como ganhar
   um contêiner só para si sem markup a mais.

   O PREÇO DA TRANSPOSIÇÃO, e ele é real: display:contents apaga a semântica
   NATIVA de tabela para a tecnologia assistiva. Por isso os papéis estão
   escritos no markup (role="table"/"rowgroup"/"row"/"columnheader"/
   "rowheader"/"cell") — sem eles, no celular a matriz viraria uma pilha de
   textos soltos. E o <th scope="row"> não é escondido com display:none: ele
   sai do olho pela receita do .visually-hidden e CONTINUA na árvore, para o
   leitor de tela seguir anunciando o critério de cada célula. A receita está
   escrita aqui, e não reaproveitada do core, porque o caso é de ALTERNAR
   entre visível e escondido — o próprio comentário da primitiva em
   core/base.css diz que ela não cobre isso.

   [data-rv] nas <tr> para de valer aqui, e não há como ser diferente: um
   elemento display:contents não gera caixa, e opacity/filter/transform não
   têm onde pegar. Quem entra no celular é o .tab-cmp-rolo, que também leva
   data-rv — então a dobra continua entrando com desfoque, só sem a escada.
   ========================================================================== */

@media(max-width:760px){

  .tab-cmp-rolo{overflow-x:visible}

  .tab-cmp-tabela{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    min-width:0;
    table-layout:auto;
  }
  .tab-cmp-thead,
  .tab-cmp-tbody,
  .tab-cmp-linha{display:contents}

  /* fora do olho, dentro da árvore de acessibilidade */
  .tab-cmp-canto,
  .tab-cmp-criterio{
    position:absolute;
    width:1px;height:1px;
    margin:-1px;padding:0;border:0;
    overflow:hidden;white-space:nowrap;
    clip-path:inset(50%);
  }

  .tab-cmp-coluna-1,.tab-cmp-cel-1{order:1}
  .tab-cmp-coluna-2,.tab-cmp-cel-2{order:2}
  .tab-cmp-coluna-3,.tab-cmp-cel-3{order:3}

  .tab-cmp-coluna{
    padding:clamp(16px,4vw,22px) clamp(16px,4vw,22px) clamp(14px,3.4vw,18px);
    border:1px solid var(--rule);
    border-radius:var(--radius-media) var(--radius-media) 0 0;
    margin-top:var(--tab-cmp-card-gap);
  }
  /* o primeiro card encosta na premissa; o vão só separa um card do outro */
  .tab-cmp-coluna-1{margin-top:0}

  .tab-cmp-cel{
    padding:clamp(14px,3.6vw,18px) clamp(16px,4vw,22px);
    border:1px solid var(--rule);
    border-top:0;
  }
  .tab-cmp-linha:last-child .tab-cmp-cel{
    border-radius:0 0 var(--radius-media) var(--radius-media);
  }

  /* o rótulo que o cabeçalho de linha deixou de mostrar */
  .tab-cmp-cel::before{
    content:attr(data-tab-cmp-criterio);
    display:block;margin-bottom:10px;
    font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
    color:var(--fg-muted);
  }
  .tab-cmp-valor{font-size:14px}
}