/* ==========================================================================
   RÉGUA DE LIQUIDEZ — objetivos arrastáveis numa linha do tempo de 30 anos
   Prefixo: liq-
   Tokens usados: --accent --bg --display --ease --fg --fg-2 --fg-muted
                  --radius-media --rule --rule-2
   Primitivas usadas: .wrap .sec-pad .sec-head .eyebrow .sec-title .sec-lead
                      .btn .btn-ghost (core/base.css)

   O eixo x é um só para as três camadas, e é por isso que elas são irmãs
   dentro de .liq-plot: a ficha, a marca da régua e o pico da área caem na
   mesma coluna de pixels porque todas leem a mesma largura de conteúdo.

   O recuo lateral de .liq-plot é METADE da ficha. Sem ele, a ficha do ano 0
   (centrada em left:0 com translateX(-50%)) sairia meia caixa para fora.
   ========================================================================== */

.liq-quadro{
  /* ---- Parafusos públicos ---- */
  --liq-ficha-w:122px;    /* largura da ficha */
  --liq-ficha-h:104px;    /* altura FIXA da ficha — é o que alinha as filas */
  --liq-fila-h:116px;     /* passo vertical entre duas filas (altura + folga) */
  --liq-haste:24px;       /* px entre a ficha da fila 0 e a régua */
  --liq-graf-h:132px;     /* altura da área */
  --liq-min:920px;        /* largura mínima do gráfico antes de rolar de lado */
  --liq-anos:30;          /* fim da régua, em anos */

  margin-top:clamp(38px,5vh,62px);
  border:1px solid var(--rule);
  padding:clamp(20px,2.2vw,28px);
}

.liq-ajuda{font-size:13.5px;line-height:1.5;color:var(--fg-muted)}

/* ---- o eixo ----
   .liq-scroll rola de lado em tela estreita (ver a nota do mobile no fim).
   O padding vertical existe para o anel de foco do core (2px a 3px de
   distância) não ser cortado pelo overflow do scroller. */
.liq-scroll{
  margin-top:22px;
  overflow-x:auto;overflow-y:hidden;
  overscroll-behavior-x:contain;
  padding-block:10px;
}
.liq-plot{
  min-width:var(--liq-min);
  padding-inline:calc(var(--liq-ficha-w) / 2);
}

/* ---- as fichas ----
   min-height cresce uma fila de cada vez, escrita pelo script em --liq-filas.
   O padrão 1 no var() é o que mantém a régua com a altura certa sem
   JavaScript, onde ninguém empilha nada. */
.liq-track{
  position:relative;
  min-height:calc(
    var(--liq-ficha-h) + var(--liq-haste)
    + (var(--liq-filas,1) - 1) * var(--liq-fila-h)
  );
  transition:min-height .3s var(--ease);
}

.liq-ficha{
  position:absolute;
  left:calc(var(--liq-ano) / var(--liq-anos) * 100%);
  bottom:calc(var(--liq-haste) + var(--liq-fila,0) * var(--liq-fila-h));
  /* A fila 0 é a mais próxima da régua e tem de cobrir a haste das filas de
     cima, que a atravessam para chegar à linha. Por isso o z-index DESCE
     conforme a fila sobe. */
  z-index:calc(9 - var(--liq-fila,0));
  width:var(--liq-ficha-w);height:var(--liq-ficha-h);
  transform:translateX(-50%);
  display:flex;flex-direction:column;
  padding:10px 11px;
  border:1px solid var(--rule-2);
  border-radius:var(--radius-media);
  background:color-mix(in srgb,var(--fg) 6%,var(--bg));
  /* pan-y deixa a página rolar no toque vertical: o componente só toma para
     si o gesto horizontal. */
  touch-action:pan-y;
  user-select:none;-webkit-user-select:none;
  transition:left .24s var(--ease),bottom .3s var(--ease),
             border-color .3s var(--ease),background-color .3s var(--ease);
}
.liq-ficha:hover{border-color:color-mix(in srgb,var(--accent) 55%,transparent)}

/* A haste desce da ficha até a régua. Fica atrás da própria ficha
   (z-index:-1 dentro do contexto que o transform da ficha cria) e atrás das
   fichas das filas de baixo, pela regra de z-index acima. */
.liq-ficha::after{
  content:"";position:absolute;left:50%;top:100%;
  width:1px;height:calc(var(--liq-haste) + var(--liq-fila,0) * var(--liq-fila-h));
  background:var(--rule-2);z-index:-1;
}
.liq-ficha.is-dragging{
  transition:none;z-index:20;
  border-color:var(--accent);
  background:color-mix(in srgb,var(--fg) 10%,var(--bg));
}
.liq-ficha.is-dragging::after{background:var(--accent)}
/* Só promete o gesto quando o script está de pé: sem ele a ficha não arrasta
   e uma mão aberta de cursor mentiria. */
.liq-quadro.is-live .liq-ficha{cursor:grab}
.liq-quadro.is-live .liq-ficha.is-dragging{cursor:grabbing}

@media(prefers-reduced-motion:reduce){
  /* Reposicionar sem transição: o arrasto continua (é gesto pedido), mas a
     ficha e a régua deixam de deslizar sozinhas depois do encaixe. */
  .liq-ficha,.liq-track{transition:none}
}

.liq-ficha-topo{display:flex;align-items:center;justify-content:space-between;gap:8px;line-height:1.2}
.liq-icone{
  width:16px;height:16px;flex:0 0 16px;
  fill:none;stroke:var(--accent);stroke-width:1.2;
  stroke-linecap:round;stroke-linejoin:round;
}
.liq-ficha-ano{
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--fg-muted);white-space:nowrap;
}
.liq-ficha-rot{margin-top:8px;font-size:12px;line-height:1.28;color:var(--fg)}
.liq-ficha-val{
  margin-top:auto;
  font-family:var(--display);font-weight:700;font-size:14px;line-height:1.25;
  letter-spacing:-.01em;color:var(--fg-2);
}

/* ---- a régua ---- */
.liq-rail{position:relative;height:30px;border-top:1px solid var(--rule-2)}
.liq-marca{
  position:absolute;top:0;
  left:calc(var(--liq-ano) / var(--liq-anos) * 100%);
  transform:translateX(-50%);
}
.liq-marca::before{
  content:"";position:absolute;left:50%;top:0;
  width:1px;height:7px;background:var(--rule-2);
}
.liq-marca-txt{
  display:block;margin-top:12px;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-muted);white-space:nowrap;
}

/* ---- a área ----
   O SVG é decorativo (aria-hidden): o dado está nas fichas e nas leituras.
   A máscara é o degradê que o gradiente de preenchimento daria — e sem ela
   seria preciso um <linearGradient> com id, que o contrato não quer. */
.liq-graf{
  display:block;width:100%;height:var(--liq-graf-h);margin-top:16px;
  mask-image:linear-gradient(to top,#000 40%,rgba(0,0,0,.55) 100%);
  -webkit-mask-image:linear-gradient(to top,#000 40%,rgba(0,0,0,.55) 100%);
}
.liq-grade{fill:none;stroke:var(--rule);stroke-width:1}
.liq-area{fill:color-mix(in srgb,var(--accent) 20%,transparent);stroke:none}
/* pathLength="1" normaliza o traço: o dash não depende do comprimento real
   do caminho, que muda a cada arrasto. */
.liq-linha{
  fill:none;stroke:var(--accent);stroke-width:1.5;
  stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:0;
  transition:stroke-dashoffset 1.5s var(--ease);
}
/* A entrada é DELEGADA ao data-rv do quadro — o componente não escreve
   observer próprio. Escondido só enquanto houver um data-rv que ainda não
   entrou: quem tirar o data-rv do .liq-quadro fica com o traço pronto pela
   regra acima, em vez de uma linha que nunca aparece. */
[data-rv] .liq-linha{stroke-dashoffset:1}
[data-rv].in .liq-linha{stroke-dashoffset:0}
@media(prefers-reduced-motion:reduce){
  /* A forma nasce pronta: sem o traço se desenhando na entrada. */
  .liq-linha{stroke-dashoffset:0;transition:none}
}

.liq-eixo-nota{
  margin-top:12px;
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--fg-muted);
}

/* ---- as leituras ---- */
.liq-saida{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:clamp(24px,3vw,52px);
  margin-top:clamp(26px,3vh,38px);
  padding-top:clamp(22px,2.6vh,30px);
  border-top:1px solid var(--rule);
}
.liq-saida-tit{
  font-family:var(--sans);font-weight:400;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--fg-muted);
}
.liq-leituras{display:grid;gap:15px;margin-top:18px}
.liq-leitura{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:14px;align-items:center;
}
.liq-leitura-num{
  grid-column:1;grid-row:1 / 3;
  font-family:var(--display);font-weight:700;
  font-size:27px;letter-spacing:-.03em;line-height:1;
  color:var(--fg);min-width:3.4ch;text-align:right;
}
.liq-leitura-rot{grid-column:2;grid-row:1;font-size:13.5px;line-height:1.3;color:var(--fg-2)}
.liq-leitura-barra{
  grid-column:2;grid-row:2;
  position:relative;height:2px;margin-top:9px;background:var(--rule);
}
.liq-leitura-barra::after{
  content:"";position:absolute;inset:0 auto 0 0;
  width:calc(var(--liq-frac,0) * 100%);
  background:var(--accent);
  transition:width .3s var(--ease);
}
@media(prefers-reduced-motion:reduce){
  /* A barra acompanha o arrasto sem deslizar: o valor aparece direto. */
  .liq-leitura-barra::after{transition:none}
}

/* Tipografia pela primitiva .nota do core; 48ch porque a ressalva mora na
   coluna estreita das leituras, ao lado da régua. */
.liq-nota{--nota-max:48ch}
.liq-btn{margin-top:22px}

/* ==========================================================================
   TELAS ESTREITAS
   A régua ROLA DE LADO, não comprime. Comprimir 30 anos nos 320px úteis de
   um celular poria as cinco fichas a menos de 55px umas das outras — todas
   colidiriam, todas subiriam de fila, e a régua viraria uma pilha vertical
   de 592px onde a posição no tempo, que é a única coisa que a peça ensina,
   deixaria de ser legível. Rolando, cada ano continua valendo os mesmos
   pixels que no desktop, e o gesto horizontal já é o gesto da peça.
   Medido: a rolagem interna começa por volta de 1010px de janela.
   ========================================================================== */

/* Faixa de notebook: a ficha encolhe para a régua caber sem rolar de lado.
   Sem isto o piso de 920px do gráfico começaria a rolar já em 1130px de
   janela — 60px de rolagem interna, o suficiente para parecer defeito. */
@media(max-width:1180px){
  .liq-quadro{--liq-ficha-w:110px;--liq-min:840px}
}

@media(max-width:860px){
  .liq-saida{grid-template-columns:minmax(0,1fr);gap:26px}
  .liq-quadro{padding:18px 14px}
  .liq-nota{--nota-max:none}
}

@media(max-width:560px){
  .liq-quadro{--liq-graf-h:112px}
  .liq-leitura-num{font-size:23px}
  .liq-leitura-rot{font-size:13px}
  .liq-btn{width:100%;justify-content:center}
}