/* ==========================================================================
   Sucessão — calculadora de custo e prazo
   Prefixo: suc-
   Tokens: --accent --display --ease --fg --fg-2 --fg-muted --radius-media
           --radius-pill --rule --rule-2 --sans
   Primitivas do core (usadas, não recopiadas): .wrap .sec-pad .sec-head
   .eyebrow .sec-title .sec-lead .pill .btn .btn-primary .btn-disc

   AJUSTES PÚBLICOS — todos na raiz .suc, todos com unidade e padrão:
     --suc-gap        respiro entre painel de controles e cartões (px)
     --suc-card-pad   respiro interno do cartão (px)
     --suc-bar-h      altura da barra de custo (px, padrão 8px)
     --suc-thumb      diâmetro do polegar da faixa (px, padrão 20px)
     --suc-surface    cor do painel de controles (calculada a partir de --fg)
     --suc-line       cor da borda de painel e cartão (idem)
     --suc-mark       a cor de marca em FORMA — polegar, trilho, barra, borda
     --suc-mark-text  a mesma marca em TEXTO — só o número da diferença
   Os quatro saem de --fg, e não de um cinza fixo, para o componente
   sobreviver a qualquer escopo de tom: em .sec-paper viram um véu escuro
   sobre branco; em .sec-dark, um véu claro sobre preto. Não existe
   --light-rgb no core, então color-mix é o único caminho honesto aqui.
   ========================================================================== */

.suc{
  --suc-gap:clamp(22px,3vw,32px);
  --suc-card-pad:clamp(22px,2.6vw,34px);
  --suc-bar-h:8px;
  --suc-thumb:20px;
  --suc-surface:color-mix(in srgb,var(--fg) 3.5%,transparent);
  --suc-line:color-mix(in srgb,var(--fg) 13%,transparent);
  /* MEDIDO, e a razão de --accent nunca aparecer puro aqui: o sage da
     Liberta (#c6ceaa) contra o creme da dobra clara (#ede9e3) dá 1,32:1 —
     some. Em .sec-dark o mesmo sage dá 9:1 e brilha. Um componente que só
     vive no escuro pode usar --accent puro; este nasce em .sec-paper.
     A saída é misturar a marca com o TEXTO da própria seção, e não com
     transparente: escurece o sage sobre o creme e clareia o mesmo sage
     sobre o preto, sem o componente saber em qual escopo caiu.
     Duas dosagens medidas contra o creme: forma 50% -> 3,2:1 (o piso de
     1.4.11 para controle e gráfico); texto 45% -> 4,6:1 (o piso de 1.4.3).
     O <em> do título e o .pill continuam do core, e a peça não põe número
     nenhum neles. */
  --suc-mark:color-mix(in srgb,var(--accent) 50%,var(--fg));
  --suc-mark-text:color-mix(in srgb,var(--accent) 45%,var(--fg));
  margin-top:clamp(38px,5.5vh,62px);
}


/* ------------------------------------------------------------ controles
   Painel único para os três campos: eles pertencem à mesma pergunta, e
   soltos na coluna leem como três blocos sem relação. */
.suc-controls{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr;
  gap:var(--suc-gap);
  align-items:start;
  padding:var(--suc-card-pad);
  border:1px solid var(--suc-line);
  border-radius:var(--radius-media);
  background:var(--suc-surface);
}

.suc-label{
  display:block;
  font-family:var(--sans);font-weight:400;
  font-size:11.5px;line-height:1.4;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-muted);
}

/* O valor grande é o mesmo desenho nos três campos — patrimônio, estado e
   herdeiros — para a fileira ler como uma linha só. */
.suc-value,
.suc-select,
.suc-stepper-value{
  font-family:var(--display);font-weight:700;
  letter-spacing:-.02em;color:var(--fg);
  font-variant-numeric:tabular-nums;
}
.suc-value{
  display:block;margin-top:12px;
  font-size:clamp(24px,2.6vw,32px);line-height:1.1;
}

/* --------------------------------------------------------- faixa (range)
   Altura de 20px na CAIXA e trilho de 3px pintado no ::track: a caixa é o
   alvo do ponteiro, o trilho é só a linha. Um input de 3px de altura tem
   alvo de clique de 3px — só o polegar é clicável. */
.suc-range{
  -webkit-appearance:none;appearance:none;
  display:block;width:100%;
  height:var(--suc-thumb);
  margin-top:16px;
  background:none;border:0;
  /* fração já preenchida do trilho; o script reescreve a cada input.
     14.3% = (8.000.000 − 1.000.000) / 49.000.000, o caso do markup. */
  --suc-fill:14.3%;
}
.suc-range::-webkit-slider-runnable-track{
  height:3px;border-radius:var(--radius-pill);
  background:linear-gradient(to right,
    var(--suc-mark) 0 var(--suc-fill),
    var(--rule-2) var(--suc-fill) 100%);
}
.suc-range::-moz-range-track{
  height:3px;border-radius:var(--radius-pill);
  background:linear-gradient(to right,
    var(--suc-mark) 0 var(--suc-fill),
    var(--rule-2) var(--suc-fill) 100%);
}
.suc-range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:var(--suc-thumb);height:var(--suc-thumb);
  border:0;border-radius:50%;background:var(--suc-mark);
  margin-top:calc((3px - var(--suc-thumb)) / 2);
  transition:box-shadow .3s var(--ease);
}
.suc-range::-moz-range-thumb{
  width:var(--suc-thumb);height:var(--suc-thumb);
  border:0;border-radius:50%;background:var(--suc-mark);
  transition:box-shadow .3s var(--ease);
}
/* Halo no arrasto: cresce o alvo visual sem mexer no layout. */
.suc-range:hover::-webkit-slider-thumb,
.suc-range:active::-webkit-slider-thumb{
  box-shadow:0 0 0 7px color-mix(in srgb,var(--accent) 20%,transparent);
}
.suc-range:hover::-moz-range-thumb,
.suc-range:active::-moz-range-thumb{
  box-shadow:0 0 0 7px color-mix(in srgb,var(--accent) 20%,transparent);
}
@media(prefers-reduced-motion:reduce){
  .suc-range::-webkit-slider-thumb{transition:none}
  .suc-range::-moz-range-thumb{transition:none}
}

.suc-hint{
  display:flex;justify-content:space-between;gap:12px;
  margin-top:10px;
  font-size:11.5px;line-height:1.5;letter-spacing:.06em;
  color:var(--fg-muted);
}
/* Dica de uma frase só: volta a ser bloco, sem as duas pontas da régua. */
.suc-hint-solo{display:block;max-width:34ch}

/* --------------------------------------------------------------- estado
   <select> nativo, e não o conversao/select-custom: aqui a lista tem oito
   itens curtos e nenhum desenho por item, e o nativo entrega o teclado, a
   busca por letra e a roda do celular de graça. */
.suc-select-box{position:relative;display:block;margin-top:16px}
.suc-select{
  -webkit-appearance:none;appearance:none;
  width:100%;font-size:17px;line-height:1.35;
  padding:0 30px 12px 0;
  background:none;border:0;border-bottom:1px solid var(--rule-2);border-radius:0;
  cursor:pointer;
  transition:border-color .3s var(--ease);
}
.suc-select:hover{border-bottom-color:var(--suc-mark)}
/* Seta desenhada com duas bordas, e não imagem: herda a cor do texto de
   apoio e acompanha o tema sem um SVG com cor crua embutida. */
.suc-select-box::after{
  content:"";position:absolute;right:7px;top:7px;
  width:8px;height:8px;
  border-right:1px solid var(--fg-muted);
  border-bottom:1px solid var(--fg-muted);
  transform:rotate(45deg);
  pointer-events:none;
}

/* ------------------------------------------------------------ herdeiros */
.suc-stepper{display:flex;align-items:center;gap:14px;margin-top:12px}
.suc-step{font-family:var(--display);font-weight:700;font-size:19px;line-height:1}
.suc-stepper-read{display:flex;flex-direction:column;line-height:1.05}
.suc-stepper-value{font-size:clamp(24px,2.6vw,32px)}
.suc-stepper-unit{
  margin-top:4px;
  font-size:11.5px;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-muted);
}

/* ------------------------------------------------------- os dois cartões */
.suc-cards{
  display:grid;grid-template-columns:1fr 1fr;
  gap:var(--suc-gap);margin-top:var(--suc-gap);
}
.suc-card{
  display:flex;flex-direction:column;
  padding:var(--suc-card-pad);
  border:1px solid var(--suc-line);
  border-radius:var(--radius-media);
}
/* O caminho estruturado é o único marcado na cor de marca — borda e barra.
   O outro fica em neutro: carregar o inventário na cor da casa inverteria
   a leitura. */
.suc-card-plan{border-color:var(--suc-mark)}

.suc-card-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.suc-card-title{
  font-family:var(--display);font-weight:700;
  font-size:19px;line-height:1.2;letter-spacing:-.02em;color:var(--fg);
}

/* ---------------------------------------------------------- as parcelas
   Cada parcela com o percentual ao lado do nome. Soma que não mostra as
   parcelas é chute com aparência de conta — e num número que fala de
   imposto isso não é detalhe de estilo. */
.suc-lines{margin:22px 0 0;display:grid;gap:0}
.suc-line{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:12px 0;
  border-bottom:1px solid var(--rule);
}
.suc-line-label{margin:0;font-size:14px;line-height:1.4;color:var(--fg-2)}
.suc-line-note{
  display:block;margin-top:4px;
  font-size:11.5px;line-height:1.4;letter-spacing:.05em;
  color:var(--fg-muted);
}
.suc-line-value{
  margin:0;white-space:nowrap;
  font-family:var(--display);font-weight:700;
  font-size:15px;letter-spacing:-.01em;color:var(--fg);
  font-variant-numeric:tabular-nums;
}

/* margin-top:auto encosta o bloco do total no pé do cartão: os dois cartões
   têm alturas de cabeçalho diferentes (a pílula da direita quebra em duas
   linhas antes), e sem isto os dois totais não ficariam na mesma altura. */
.suc-total{margin-top:auto;padding-top:22px}
.suc-total-label{
  display:block;
  font-size:11.5px;line-height:1.4;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-muted);
}
.suc-total-value{
  display:block;margin-top:6px;
  font-family:var(--display);font-weight:700;
  font-size:clamp(28px,3.2vw,40px);line-height:1.05;letter-spacing:-.025em;
  color:var(--fg);font-variant-numeric:tabular-nums;
}
/* A ressalva colada no número, não no rodapé: é aqui que a pessoa lê. */
.suc-flag{
  display:block;margin-top:8px;
  font-size:11px;line-height:1.45;letter-spacing:.04em;
  color:var(--fg-muted);
}

/* ------------------------------------------------------------- a barra
   Decorativa (aria-hidden): quem usa leitor de tela recebe os números do
   .suc-total e do .suc-term, não "gráfico". O raio fica no TRILHO, com
   overflow:hidden — no preenchimento, scaleX esmagaria a ponta em elipse. */
.suc-bar{
  height:var(--suc-bar-h);margin-top:18px;
  border-radius:var(--radius-pill);overflow:hidden;
  background:color-mix(in srgb,var(--fg) 9%,transparent);
}
.suc-bar-fill{
  display:block;width:100%;height:100%;
  transform-origin:left center;
  transform:scaleX(var(--suc-bar,1));
  transition:transform .55s var(--ease);
}
.suc-bar-raw{background:color-mix(in srgb,var(--fg) 55%,transparent)}
.suc-bar-plan{background:var(--suc-mark)}
@media(prefers-reduced-motion:reduce){
  .suc-bar-fill{transition:none}
}

.suc-term{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  margin-top:16px;
}
.suc-term-label{
  font-size:11.5px;line-height:1.4;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-muted);
}
.suc-term-value{
  font-family:var(--display);font-weight:700;
  font-size:15px;letter-spacing:-.01em;color:var(--fg);white-space:nowrap;
}
.suc-say{
  margin-top:16px;max-width:46ch;
  font-size:13.5px;line-height:1.55;color:var(--fg-muted);
}

/* ---------------------------------------------------------- a diferença */
.suc-delta{
  margin-top:var(--suc-gap);
  padding-top:clamp(22px,3vh,30px);
  border-top:1px solid var(--suc-line);
}
.suc-delta-line{
  max-width:72ch;
  font-size:clamp(17px,1.7vw,21px);line-height:1.55;color:var(--fg);
}
.suc-delta-value{
  font-family:var(--display);font-weight:700;
  font-size:1.35em;letter-spacing:-.02em;color:var(--suc-mark-text);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.suc-delta-term{color:var(--fg-2)}

/* ---------------------------------------------------------- a ressalva */
/* Corpo, entrelinha e tinta vêm da primitiva .nota do core. Fica a posição e a
   medida: 88ch porque esta ressalva é longa e acompanha a largura dos dois
   cartões de cenário — em 74ch ela viraria um bloco estreito no meio deles. */
.suc-nota{
  margin-top:20px;
  --nota-max:88ch;
}
.suc-nota-strong{font-weight:600;color:var(--fg-2)}
.suc-nota-static{margin-top:14px}

.suc-cta{margin-top:clamp(26px,3.5vh,38px)}

/* ============================================================== mobile */
@media(max-width:980px){
  .suc-controls{grid-template-columns:1fr 1fr}
  .suc-field-wealth{grid-column:1 / -1}
  .suc-cards{grid-template-columns:1fr}
  /* Empilhados, os dois totais já não se comparam lado a lado: o
     margin-top:auto só gastaria respiro no fim do primeiro cartão. */
  .suc-total{margin-top:0}
}

@media(max-width:620px){
  .suc-controls{grid-template-columns:1fr;gap:26px}
  .suc-field-wealth{grid-column:auto}
  .suc-line{flex-direction:column;align-items:flex-start;gap:6px}
  .suc-term{flex-direction:column;align-items:flex-start;gap:4px}
  .suc-delta-value{white-space:normal}
}