/* Página /primeiro-milhao. Só o que os componentes da fundação não cobrem. */

/* "R$" antes do valor, no mesmo peso do número (como no mockup). */
.nf-field__control:has(input:placeholder-shown) .nf-field__prefix{color:var(--ink-muted)}

/* Botão "Usar CDI de hoje" e a origem do CDI. */
.pm-cdi{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.pm-cdi .nf-btn--link{font-size:13px;line-height:18px;text-align:left}
.pm-cdi .nf-btn--link:disabled{color:var(--ink-muted);text-decoration:none;cursor:not-allowed}
.pm-cdi .nf-btn--link:focus-visible{border-radius:2px}

/* A dica fica colada à caixa de seleção. */
.nf-field:has(.nf-check){gap:6px}
.nf-field:has(.nf-check) .nf-field__hint{padding-left:32px}

/* Linha "Em valores de hoje" no bloco grafite. */
.pm-real-line{border-top:1px solid var(--graphite-800);padding-top:12px}

/* Cartão "Para chegar em Y anos, guarde X por mês". */
.pm-target{border:1px solid var(--orange-500);box-shadow:inset 4px 0 0 var(--orange-500);padding:16px 20px}
.pm-target p{margin:0;font-size:17px;line-height:24px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.pm-target[hidden]{display:none}

/* Gráfico mais alto, como no mockup. */
[data-pm-chart] .nf-columns{height:260px}
@media (max-width:599px){[data-pm-chart] .nf-columns{height:200px}}

/* Tabela "Quanto guardar por mês" ocupa a largura toda, abaixo da grade. */
.pm-savings{margin-top:32px}
.pm-savings .nf-table tbody th{white-space:nowrap;color:var(--ink)}

/* Valores de 7 dígitos cabem numa linha nos três cartões lado a lado. */
@media (min-width:768px){[data-pm-stats] .nf-stat__value{font-size:20px;letter-spacing:-.01em;white-space:nowrap}}

/* site.css tem regras globais de tabela da renda fixa (largura mínima de 900 px, última linha em negrito, cabeçalho cinza e fixo).
   Neutralizadas aqui para seguir o mockup; pedido registrado no REPORT para a fundação. */