/* ==========================================================================
   CALCULADORA DE PROJEÇÃO — prefixo proj-
   Duas colunas: à esquerda três controles de faixa, os chips de cenário e as
   leituras em número; à direita um gráfico de área em SVG dentro de um card
   de vidro, com a ressalva de compliance colada embaixo dele.

   Tokens usados: --accent --fg --fg-2 --fg-muted --rule --rule-2 --display
   --sans --ease --radius-pill --radius-media
   Primitivas do core (usadas, não recopiadas): .wrap .sec-pad .sec-head
   .eyebrow h2.sec-title .sec-lead .glass .btn/.btn-primary .pill

   O SVG é estilizado AQUI, não por atributo de apresentação: `fill` e
   `stroke` escritos no markup seriam cor crua e não leriam token. A regra do
   contrato vale dentro do SVG como vale fora.
   ========================================================================== */

.proj-head{--head-max:700px}

/* --------------------------------------------------------------- o grid */
/* A coluna do gráfico é a maior: é onde o olho vai. Abaixo de 940px as duas
   empilham (ver o fim do arquivo) — o gráfico primeiro seria bonito e errado,
   porque o gráfico só significa alguma coisa depois de a pessoa entender que
   pode mexer. Controles em cima, sempre. */
.proj-grid{
  --proj-thumb:18px;                    /* diâmetro do botão da faixa */
  --proj-tick-size:14px;                /* corpo dos rótulos dentro do SVG */
  --proj-end-size:19px;                 /* corpo do valor no fim da linha */
  --proj-band-op:16%;                   /* opacidade da faixa sobre --accent */
  margin-top:clamp(38px,6vh,62px);
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(28px,4vw,60px);
  align-items:start;
}

/* Três filhos, e a ordem do DOM é painel > gráfico > botão — a ordem certa
   para o mobile, onde tudo empilha. No desktop o botão volta para debaixo do
   painel por colocação explícita, e o gráfico ocupa a coluna da direita
   inteira. Sem isto o botão seria filho do painel e o mobile terminaria a
   peça num gráfico órfão, depois da chamada. */
.proj-panel{grid-column:1;grid-row:1}
.proj-chart{grid-column:2;grid-row:1 / span 2}
.proj-cta{grid-column:1;grid-row:2}

/* ---------------------------------------------------------- os controles */
.proj-ctrl{
  padding-block:clamp(14px,2vh,20px);
  border-top:1px solid var(--rule);
}
.proj-ctrl:first-child{border-top:0;padding-top:0}

.proj-ctrl-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;margin-bottom:10px;
}

.proj-name{
  font-family:var(--sans);
  font-size:11.5px;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-muted);
}

/* O valor ao vivo. Tabular porque ele muda a cada quadro do arrasto: sem
   algarismo de avanço fixo o número treme lateralmente e puxa o rótulo
   junto. Mesma razão do contador da régua de números. */
.proj-val{
  font-family:var(--display);font-weight:700;
  font-size:clamp(19px,2vw,23px);line-height:1;letter-spacing:-.02em;
  color:var(--fg);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

.proj-scale{
  display:flex;justify-content:space-between;gap:12px;
  margin-top:6px;
  font-family:var(--sans);font-size:11px;letter-spacing:.06em;
  color:var(--fg-muted);
}

/* ------------------------------------------------------------- a faixa */
/* Um <input type="range"> de verdade, repintado. Nada de div com arrasto:
   o range já traz teclado (setas, Home/End, PageUp/PageDown), papel de
   slider, valor mínimo, máximo e atual — e nada disso se reescreve bem.
   O trecho preenchido é gradiente, porque o WebKit não tem pseudo-elemento
   de progresso; --proj-fill vem do script (e do style inline do markup,
   para o estado sem JS não nascer torto). */
.proj-range{
  --proj-fill:50%;
  -webkit-appearance:none;appearance:none;
  display:block;width:100%;height:calc(var(--proj-thumb) + 8px);
  margin:0;padding:0;background:transparent;cursor:pointer;
  border-radius:var(--radius-pill);   /* só para o anel de foco acompanhar */
}

/* WebKit e Gecko NÃO podem dividir a mesma regra: um seletor com pseudo
   desconhecido invalida o bloco inteiro para o outro motor. Daí a repetição
   deliberada abaixo — não é descuido de copiar e colar. */
.proj-range::-webkit-slider-runnable-track{
  height:3px;border-radius:var(--radius-pill);
  background:linear-gradient(to right,
    var(--accent) 0 var(--proj-fill),
    var(--rule-2) var(--proj-fill) 100%);
}
.proj-range::-moz-range-track{
  height:3px;border-radius:var(--radius-pill);
  background:linear-gradient(to right,
    var(--accent) 0 var(--proj-fill),
    var(--rule-2) var(--proj-fill) 100%);
}

.proj-range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:var(--proj-thumb);height:var(--proj-thumb);
  border:0;border-radius:50%;background:var(--accent);
  margin-top:calc((3px - var(--proj-thumb)) / 2);
  transition:box-shadow .3s var(--ease);
}
.proj-range::-moz-range-thumb{
  width:var(--proj-thumb);height:var(--proj-thumb);
  border:0;border-radius:50%;background:var(--accent);
  transition:box-shadow .3s var(--ease);
}
/* Halo no arrasto: cresce o alvo visual sem mexer no layout. */
.proj-range:hover::-webkit-slider-thumb,
.proj-range:active::-webkit-slider-thumb{
  box-shadow:0 0 0 7px color-mix(in srgb,var(--accent) 20%,transparent);
}
.proj-range:hover::-moz-range-thumb,
.proj-range:active::-moz-range-thumb{
  box-shadow:0 0 0 7px color-mix(in srgb,var(--accent) 20%,transparent);
}
@media(prefers-reduced-motion:reduce){
  .proj-range::-webkit-slider-thumb{transition:none}
  .proj-range::-moz-range-thumb{transition:none}
}

/* -------------------------------------------------------- os cenários */
.proj-scen{
  margin-top:clamp(20px,3vh,28px);
  padding:0;border:0;
}
.proj-scen-legend{
  padding:0;
  font-family:var(--sans);
  font-size:11.5px;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-muted);
}
.proj-chips{
  position:relative;               /* âncora do radio escondido */
  display:flex;flex-wrap:wrap;gap:8px;
  margin-top:12px;
}
/* O radio some da tela mas continua no fluxo de foco e de teclado: é ele que
   dá as setas entre opções do mesmo `name` de graça. Substituir por <div
   role="radio"> custaria trinta linhas de JS para reproduzir o que o
   navegador entrega pronto. */
.proj-chip-in{
  position:absolute;width:1px;height:1px;margin:0;padding:0;border:0;
  clip-path:inset(50%);overflow:hidden;white-space:nowrap;
}
.proj-chip{
  display:inline-block;cursor:pointer;
  font-family:var(--sans);font-size:12px;letter-spacing:.08em;
  color:var(--fg-2);
  border:1px solid var(--rule-2);border-radius:var(--radius-pill);
  padding:9px 18px;
  transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease);
}
.proj-chip:hover{color:var(--fg);border-color:var(--accent)}
.proj-chip-in:checked + .proj-chip{
  color:var(--accent);
  border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 10%,transparent);
}
/* O anel de foco vive no rótulo, porque o input não tem caixa visível. */
.proj-chip-in:focus-visible + .proj-chip{
  outline:2px solid var(--accent);outline-offset:3px;
}
@media(prefers-reduced-motion:reduce){
  .proj-chip{transition:none}
}

/* --------------------------------------------------------- as leituras */
.proj-readout{
  margin-top:clamp(24px,3.4vh,34px);
  padding-top:clamp(20px,2.8vh,26px);
  border-top:1px solid var(--rule);
  display:grid;gap:clamp(14px,2vh,20px);
}
.proj-read{display:flex;align-items:baseline;justify-content:space-between;gap:18px}
.proj-read-k{
  font-family:var(--sans);font-size:12.5px;line-height:1.45;
  color:var(--fg-muted);max-width:26ch;
}
.proj-read-v{
  font-family:var(--display);font-weight:700;
  font-size:clamp(17px,1.8vw,21px);line-height:1.1;letter-spacing:-.02em;
  color:var(--fg);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;text-align:right;
}
/* O "a" que separa os dois extremos da faixa. Fino de propósito: os dois
   números são o dado, o conectivo não. */
.proj-read-sep{
  font-family:var(--sans);font-weight:400;font-size:12.5px;
  letter-spacing:.06em;color:var(--fg-muted);
  padding-inline:6px;
}

/* Sem margem própria: quem separa o botão das leituras é o `gap` da grade —
   no desktop porque ele é a segunda linha, no mobile porque ele é o terceiro
   item da pilha. Somar margem aqui dobrava o vão (medido: 88px onde o ritmo
   da dobra pedia 58). */
.proj-cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px}

/* ---------------------------------------------------------- o gráfico */
.proj-chart{
  padding:clamp(16px,2.2vw,26px);
  border-radius:var(--radius-media);
}
.proj-svg{display:block;width:100%;height:auto}

.proj-guide{stroke:var(--rule);stroke-width:1;fill:none}
.proj-axis{stroke:var(--rule-2);stroke-width:1;fill:none}

/* A FAIXA. Ela é o assunto desta peça, não enfeite: uma linha só diria "o
   dinheiro chega aqui"; a área diz "o resultado mora nesta região, e a região
   é larga". Não a estreite para ficar bonita — estreitar a faixa é estreitar
   a ressalva. */
.proj-band{
  fill:color-mix(in srgb,var(--accent) var(--proj-band-op),transparent);
  stroke:none;
  transition:opacity .9s var(--ease),filter .9s var(--ease);
}
.proj-line{
  fill:none;stroke:var(--accent);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
  transition:stroke-dashoffset 1.5s var(--ease),filter 1.5s var(--ease);
}
.proj-dot{fill:var(--accent);stroke:none}

/* Estado de partida da entrada. Só o script o aplica, e só quando há
   movimento: sem JS o desenho nasce inteiro, que é o estado honesto. */
.is-enter .proj-band{opacity:0;filter:blur(10px)}
.is-enter .proj-line{filter:blur(6px)}
.is-enter .proj-dot,
.is-enter .proj-end,
.is-enter .proj-endcap{opacity:0}
.proj-dot,.proj-end,.proj-endcap{transition:opacity .8s var(--ease) .5s}
@media(prefers-reduced-motion:reduce){
  .proj-band,.proj-line,.proj-dot,.proj-end,.proj-endcap{transition:none}
}

/* Texto dentro do SVG: corpo em unidades do viewBox, então ele encolhe junto
   com o desenho. No mobile a caixa fica com metade da largura e o rótulo
   cairia para ~7px — por isso as variáveis sobem lá embaixo, na media query,
   em vez de um valor fixo aqui. */
.proj-tick,.proj-ymax{
  font-family:var(--sans);font-size:var(--proj-tick-size);
  letter-spacing:.08em;fill:var(--fg-muted);
}
.proj-endcap{
  font-family:var(--sans);font-size:var(--proj-tick-size);
  letter-spacing:.06em;fill:var(--fg-muted);
}
.proj-end{
  font-family:var(--display);font-weight:700;
  font-size:var(--proj-end-size);letter-spacing:-.02em;
  fill:var(--fg);
}

/* --------------------------------------------------------- pé do gráfico */
.proj-key{
  display:flex;flex-wrap:wrap;gap:8px 20px;
  margin-top:clamp(14px,2vh,20px);
}
.proj-key-item{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--sans);font-size:12px;line-height:1.5;
  color:var(--fg-2);
}
.proj-key-swatch{
  width:22px;height:10px;flex:none;
  border-radius:2px;
  background:color-mix(in srgb,var(--accent) 26%,transparent);
}
.proj-key-swatch.is-line{
  height:2px;border-radius:0;
  background:var(--accent);
}

/* A RESSALVA. Fica aqui, colada no gráfico, e não no rodapé da página: quem
   lê o resultado tem de ler a ressalva no mesmo movimento de olho. Mover
   este bloco para o fim da página descumpre o combinado. */
/* A tipografia vem da primitiva .nota do core; aqui fica só a POSIÇÃO — a
   margem, o filete que amarra a ressalva ao gráfico, e a medida: 62ch porque
   a ressalva mora na coluna do resultado, não na largura da seção. */
.proj-nota{
  margin-top:clamp(14px,2vh,18px);
  padding-top:clamp(12px,1.8vh,16px);
  border-top:1px solid var(--rule);
  --nota-max:62ch;
}

/* ------------------------------------------------------------ variações */
/* Gráfico sem o card de vidro: só o desenho sobre o fundo da seção. Use em
   dobra clara, onde o vidro não tem o que refratar. */
.proj-chart--nu{
  padding:0;
  border:0;background:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
/* Faixa mais presente, para dobra em que o gráfico é a peça principal. */
.proj-grid--faixa-forte{--proj-band-op:26%}

/* ---------------------------------------------------------------- mobile */
@media(max-width:940px){
  /* O rótulo dentro do SVG é medido em unidade de viewBox: com a caixa na
     metade da largura, 14 unidades viram ~7px na tela. */
  .proj-grid{
    grid-template-columns:1fr;gap:clamp(26px,5vh,40px);
    --proj-tick-size:17px;--proj-end-size:23px;
  }
  /* Coluna única: a colocação explícita sai da frente e o fluxo do DOM
     (painel, gráfico, botão) volta a mandar. */
  .proj-panel,.proj-chart,.proj-cta{grid-column:1;grid-row:auto}
}

@media(max-width:560px){
  .proj-grid{--proj-tick-size:20px;--proj-end-size:26px;--proj-thumb:22px}
  .proj-read{flex-direction:column;align-items:flex-start;gap:4px}
  .proj-read-v{text-align:left}
  .proj-read-k{max-width:none}
  /* Botão de largura cheia, pílula não: esticada, ela deixa de ler como
     etiqueta e passa a ler como segundo botão. */
  .proj-cta{flex-direction:column;align-items:stretch}
  .proj-cta .pill{align-self:flex-start}
}