/* A LINHA DO TEMPO DO ROADMAP — a folha do componente, usada em duas páginas.

   Mora aqui, e não na entregas.css onde nasceu, porque em 02/10/2026 o Panorama
   da Central passou a desenhar o mesmo roadmap. Marcação e folha andam juntas:
   quem emite estas classes é o assets/roadmap-visao.js, e mexer numa sem a
   outra quebra o desenho.

   O que NÃO veio junto: as regras de @media print, que ficaram na entregas.css
   por serem da página do relatório (só ele vai ao papel). Elas citam estas
   classes de fora, e tudo bem — folha pode mirar marcação de outro módulo.

   Os tokens usados aqui (--atencao, --atencao-fundo, --fio, --neutro, além dos
   comuns) precisam existir na folha da página que carregar este arquivo. */
/* O gráfico é mais largo que o telefone e rola na horizontal — isso é
   inevitável num Gantt de 12 meses em 375px. O que NÃO era aceitável é o
   gráfico não avisar: os quatro últimos projetos começam depois de dezembro, e
   no telefone as linhas deles apareciam VAZIAS. Projeto sem barra lê como
   projeto sem plano, não como "a barra está fora da tela".

   A sombra é a técnica clássica de duas camadas: os gradientes brancos rolam
   junto com o conteúdo (`local`) e tapam a sombra quando não há mais o que
   rolar daquele lado; as sombras ficam presas ao quadro (`scroll`). Resultado:
   sombra à direita só enquanto existe gráfico à direita, e ela some ao chegar
   no fim. Sem JS e sem marcação nova. */
.rl-rm-wrap {
  overflow-x: auto;
  padding: clamp(1.1rem, 2.2vw, 1.6rem);
  border: var(--fio);
  border-radius: var(--raio-painel);
  box-shadow: var(--sombra-painel);
  background:
    linear-gradient(to right, var(--superficie) 40%, rgba(255, 255, 255, 0)) left center / 48px 100% no-repeat local,
    linear-gradient(to left, var(--superficie) 40%, rgba(255, 255, 255, 0)) right center / 48px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(28, 28, 26, 0.16), rgba(28, 28, 26, 0)) left center / 16px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(28, 28, 26, 0.16), rgba(28, 28, 26, 0)) right center / 16px 100% no-repeat scroll,
    var(--superficie);
}
.rl-rm-grade {
  position: relative;
  display: grid;
  /* 21rem e não 15: medido, o nome mais longo do roadmap ("Ajustes Loja USA
     Compliance Google") tem 240px e a coluna tinha 240px — ele sozinho já a
     enchia, e o selo de 80px caía numa segunda linha. Com o selo embaixo a
     raia ia de 35px pra 56px e a régua do tempo perdia o ritmo. Em 21rem cabem
     os treze nomes com selo na mesma linha; custa ~10% da largura da régua, o
     que em treze meses é menos de sete pixels por mês. */
  grid-template-columns: minmax(150px, 21rem) 1fr;
  column-gap: 1.25rem;
  /* A largura mínima é a coluna de nomes mais 3rem POR MÊS — 48px, que é o
     rótulo mais largo ("ago/26", 45px) com folga. O `--meses` vem da marcação,
     que é quem sabe o tamanho da régua.

     Era `min-width: 600px`, fixo, e o número não fechava: 336px iam pros nomes
     e sobravam 264 pra doze meses, 22px cada. Os rótulos se empilhavam uns por
     cima dos outros em qualquer container estreito. O quadro já rola na
     horizontal (.rl-rm-wrap) — rolar é o comportamento certo aqui; ilegível
     não era. */
  min-width: calc(21rem + 1.25rem + var(--meses, 12) * 3rem);
}
.rl-rm-escala { grid-column: 2; position: relative; height: 1.6rem; }
.rl-rm-escala span {
  position: absolute;
  top: 0;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mudo);
  white-space: nowrap;
}
.rl-rm-escala i { font-style: normal; color: var(--mudo); }
.rl-rm-item { display: contents; }
/* A coluna de título é estreita (240px no máximo) e a pílula não pode quebrar
   no meio: ao lado de um nome longo ela desce pra própria linha. */
/* O fio que separa uma iniciativa da outra é border-TOP, não bottom, e é de
   propósito: assim a primeira linha fecha a faixa dos meses e a última não
   deixa um fio solto encostado na borda do painel. Ele é mais claro que o
   divisor de mês (--borda) porque separa, não mede — quem conta a passagem do
   tempo é a linha vertical. */
.rl-rm-titulo, .rl-rm-trilha { border-top: 1px solid var(--superficie-2); }
/* O selo é fixado à direita e o nome encolhe, em vez de os dois disputarem a
   linha. Hoje todos cabem; num nome futuro maior, o nome quebra em duas linhas
   e o selo continua no alto à direita, alinhado com os outros — em vez de
   ocupar uma linha sozinho. `min-width: 0` é o que permite o nome encolher:
   sem ele um item flex se recusa a ficar menor que o próprio conteúdo. */
.rl-rm-titulo {
  grid-column: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.45rem;
  padding: 0.5rem 0;
  font-size: 0.85rem;
  line-height: 1.35;
}
.rl-rm-nome { min-width: 0; }
/* A geometria da pílula é compartilhada; só a cor distingue o estado.
   `.rl-rm-feito` mantém o nome porque o report v2 emite a mesma classe — os
   dois documentos têm folhas separadas, mas renomear aqui faria o nome divergir
   entre eles sem ganho nenhum. */
.rl-rm-feito, .rl-rm-teste, .rl-rm-andamento {
  flex: none;
  margin-top: 0.1rem;   /* acerta o selo com a primeira linha do nome */
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.rl-rm-feito { background: var(--positivo); color: #fff; }
.rl-rm-teste { background: var(--atencao-fundo); color: var(--atencao); }
/* Mesmo azul do selo do cartão: o estado tem de ter a mesma cara nas duas
   seções, senão o leitor acha que são coisas diferentes. */
.rl-rm-andamento { background: #e2e8f5; color: #1e40af; }
/* z-index acima dos divisores de mês: grade é fundo, barra é dado. Sem isso a
   linha do mês corta a barra ao meio, porque vem depois no DOM. */
.rl-rm-trilha { grid-column: 2; position: relative; z-index: 1; min-height: 1.5rem; padding: 0.5rem 0; }
.rl-rm-barra {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 0.7rem;
  min-width: 6px;
  border-radius: 999px;
  background: var(--neutro);
}
/* Três estados, e a barra concorda com a pílula: cinza é plano (só a janela no
   calendário, sem afirmação), tinta é o que está rodando agora — a única cor
   cheia entre iniciativas futuras — e verde é concluído, como em toda a
   Central. Antes toda barra era verde, inclusive a de item nem começado. */
.rl-rm-barra-feita { background: var(--positivo); }
/* "Em teste" divide a barra PRETA com "em andamento", por decisão do Urlan.
   A leitura fica consistente com a régua acima: tinta é trabalho rodando agora,
   e teste é trabalho rodando. Quem separa os dois estados é o selo, que continua
   âmbar — ele passa a ser a legenda da barra em vez de ter cor própria nela.

   A classe segue existindo separada no HTML mesmo com a mesma cor: o estado é
   distinto, e é nela que uma cor própria voltaria a pendurar sem mexer no JS.

   Registrado o que NÃO fazer se alguém tentar de novo: --atencao-fundo (o fundo
   da pílula) dá 1,13:1 sobre a superfície branca do gráfico — menos que as
   barras de "planejado", com 2,10:1. O item em teste lia como menos presente
   que projeto que nem começou. */
.rl-rm-barra-andamento, .rl-rm-barra-teste { background: var(--tinta); }
/* O divisor precisa ir da escala até a última linha da grade. `grid-row: 1/-1`
   parecia dizer isso, mas não dizia: -1 é a última linha do grid EXPLÍCITO, e
   aqui só as colunas são explícitas — as linhas nascem implícitas, uma por
   item. Sem linha explícita nenhuma, -1 caía de volta na linha 1 e o divisor
   ficava com a altura da faixa dos meses (25px), invisível na prática. Em item
   posicionado absolutamente dentro do grid, um fim `auto` resolve na borda de
   baixo do container — que é exatamente onde a régua tem que terminar. */
.rl-rm-mes, .rl-rm-hoje {
  position: absolute;
  grid-column: 2;
  grid-row: 1 / auto;
  inset: 0;
  pointer-events: none;
}
.rl-rm-mes::after, .rl-rm-hoje::after {
  content: '';
  position: absolute;
  top: 1.4rem;
  bottom: 0;
  left: var(--x, 0%);
}
.rl-rm-mes::after { border-left: 1px solid var(--borda); }
/* "Hoje" é a exceção que sobe acima das barras: é a linha que a pessoa procura
   pra saber onde está no plano. */
.rl-rm-hoje { z-index: 2; }
.rl-rm-hoje::after { border-left: 1px dashed var(--tinta); }
/* O rótulo desce pra linha de baixo da escala: em cima colidia com o nome do
   mês quando hoje caía perto da virada. */
.rl-rm-hoje span {
  position: absolute;
  top: 1.4rem;
  left: var(--x, 0%);
  transform: translate(-50%, -50%);
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: var(--tinta);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
}

/* ---------- Telefone ---------- */
@media (max-width: 719px) {

  /* A escala do roadmap tinha 12 rótulos "JUL/26" disputando uns 430px e eles
     se sobrepunham, virando uma linha ilegível. O que sobra ali é o ano: ele
     se repete doze vezes pra dizer a mesma coisa. Fica só no primeiro rótulo,
     onde ancora a leitura; os outros mostram o mês. */
  /* A coluna de nomes comia 240px dos 344 visíveis: sobravam 104px de gráfico,
     e o leitor tinha que arrastar 256px pra ver as barras. É Gantt de 12 meses
     em tela de 375 — rolagem horizontal é inevitável, mas 70% da largura presa
     no rótulo não é. Nome mais estreito (quebra em duas linhas, tudo bem) e
     régua mais curta deixam quase metade do gráfico à vista de saída. */
  /* No telefone a coluna de nomes encolhe e o rótulo perde o ano (ver
     .rl-rm-escala i, abaixo), então cabe em 2rem por mês em vez de 3. */
  .rl-rm-grade {
    grid-template-columns: minmax(96px, 8rem) 1fr;
    min-width: calc(8rem + 1.25rem + var(--meses, 12) * 2rem);
  }
  .rl-rm-titulo { font-size: 0.78rem; }
  /* No telefone a coluna tem 128px e não cabem nome e selo lado a lado: fixar o
     selo à direita espremia o nome numa tira de 50px, e "Nova PDP USA" saía em
     três linhas. Aqui o nome toma a linha inteira e o selo desce — duas linhas
     legíveis valem mais que uma linha alinhada. */
  .rl-rm-titulo { flex-wrap: wrap; justify-content: flex-start; gap: 0.25rem 0.45rem; }
  .rl-rm-nome { min-width: 100%; }
  .rl-rm-feito, .rl-rm-teste, .rl-rm-andamento { margin-top: 0; }

  .rl-rm-escala i { display: none; }
  /* O primeiro guarda o ano, senão a régua não diz de que ano ela parte. Ele
     desce pra segunda linha: ao lado do mês, "JUL/26" invadia 9px do "AGO".
     Duas linhas a 1.15 cabem nos 1.6rem que a faixa já tinha, então nem as
     divisórias nem o selo "hoje" precisam descer junto. */
  .rl-rm-escala span:first-child { line-height: 1.15; }
  .rl-rm-escala span:first-child i { display: block; }
}