/* ==========================================================================
   TRAJETO — a faixa horizontal dos proximos 30 dias.

   FOLHA PROPRIA, e nao um bloco dentro de telas.css: a regra da peca mora na
   folha da peca. O trajeto e a unica superficie do produto onde a gramatica da
   marca — no · trajeto · destino — e literal em vez de metafora, e por isso ele
   e a peca que mais se mexe quando o sistema visual anda.

   TODO BLOCO @media VAI PARA O FIM DO ARQUIVO: media query nao acrescenta
   especificidade, e uma regra de `pointer: coarse` escrita no topo perde por
   ordem de fonte para qualquer declaracao equivalente escrita abaixo. Ja
   custou um alvo de toque de 34 px com a correcao presente no arquivo.
   ========================================================================== */

.trj { padding: 14px 16px 12px; }

.trj__c { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-bottom: 12px; }
.trj__c b { font-size: 13px; font-weight: 600; }
.trj__c .sm { color: var(--fg2); }

/* ROLAGEM DE INSTRUMENTO NAO E ROLAGEM DE PAGINA. Em 375 px o miolo mantem os
   640 px e rola AQUI dentro; a pagina nao se mexe. O estouro horizontal se mede
   dentro do instrumento, nunca na pagina. */
.trj__rolo { overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 4px; }

.trj__in {
  position: relative;
  display: grid; grid-template-columns: repeat(30, minmax(0, 1fr));
  gap: 2px; min-width: 640px; padding-top: 20px;
}

/* a linha que liga os nos — o trajeto. Fica ATRAS dos nos e nao recebe clique. */
.trj__via {
  position: absolute; left: 0; right: 0; top: 26px; height: 1.5px;
  background: var(--lin2); border-radius: var(--pill);
}

/* -------------------------------------------------------------- o dia --- */
.trj__d {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 12px 0 4px; border-radius: var(--r-sm);
  font-variant-numeric: tabular-nums; color: var(--fg3); min-width: 0;
}
.trj__n { font-size: 11.5px; line-height: 1.2; }
.trj__m { font-size: 9.5px; color: var(--fg4); letter-spacing: .02em; }
.trj__v { font-family: var(--fm); font-size: 9.5px; color: var(--fg3); margin-top: 1px; }

.trj__d--fds .trj__n, .trj__d--fds .trj__m { color: var(--fg4); }
.trj__d--tem { color: var(--fg); cursor: pointer; }
.trj__d--tem .trj__n { font-weight: 600; }

/* O NO — 9 px como em `.pz s` e `.est s`: e a mesma lingua. O tamanho vem do
   VALOR que vence no dia, por raiz quadrada (o no codifica area). */
.trj__no {
  position: absolute; top: 8px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--b400);
  transition: background var(--t1) var(--ease);
}
.trj__d--u .trj__no { background: var(--r2); }

/* O ULTIMO NO DO TRAJETO E LIME, e este e um dos tres donos desenhados da cor:
   marca, checkpoint de chegada e este. Lime e fim de trajeto — nunca "vai bem",
   que e verde de prazo. E NUNCA como texto sobre superficie clara (1,32:1): so
   como preenchimento de no. */
.trj__d--fim .trj__no { background: var(--lime); box-shadow: 0 0 0 2px var(--sup); }

/* HOJE PULSA — reacao com significado, o mesmo halo de `.pz--hoje s`. */
.trj__d--hoje .trj__no::after {
  content: ""; position: absolute; inset: -1.5px; border-radius: 50%;
  border: 1.5px solid currentColor; animation: pulso 1.9s var(--ease) infinite;
}
.trj__d--hoje { color: var(--fg); }
.trj__d--hoje .trj__n { font-weight: 600; }
.trj__d--hoje .trj__no { background: var(--r1); color: var(--r1); }

.trj__d--sel { background: var(--sup3); }
.trj__d--sel .trj__no { background: var(--acao); }

/* ------------------------------------------------------------ rodape ---- */
.trj__r { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
          padding-top: 11px; margin-top: 10px; border-top: 1px solid var(--lin); }
.trj__r span { display: inline-flex; align-items: center; gap: 6px;
               font-size: 10.5px; color: var(--fg3); }
.trj__lg { width: 9px; height: 9px; border-radius: 50%; background: var(--b400); flex: none; }
.trj__lg--u { background: var(--r2); }
.trj__lg--fim { background: var(--lime); }
/* o que fica de fora da janela se declara — total silencioso mente */
.trj__fora { margin-left: auto; }
.trj__fora .ico { color: var(--fg4); }

/* ======================================================== @media, no fim = */
@media (hover: hover) {
  .trj__d--tem:hover { background: var(--sup2); }
  .trj__d--tem:hover .trj__no { background: var(--b600); }
  .trj__d--fim:hover .trj__no { background: var(--lime); }
}

/* NO TOQUE O ALVO CRESCE PELA LARGURA, e o instrumento rola mais — a correcao
   e de ALCANCE, entao ela mexe no alcance. 30 dias x 44 px = 1.320. */
@media (pointer: coarse) {
  .trj__in { min-width: 1320px; }
  .trj__d { padding-bottom: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .trj__d--hoje .trj__no::after { animation: none; }
}