/* ============================================================
   Calculadora FIRE — só o que é desta página.
   Os componentes base (cartões, campos, gráfico, tabela, instruções,
   barra de baixo) vêm do calc.css; aqui tudo leva o prefixo fi-. Não
   declara tokens de tema: herda-os do site.css (ou do prelúdio, no
   ficheiro único).
   Séries (validadas para daltonismo nas duas superfícies Neo):
     património / investimentos = Água (--data-2), como o capital dos juros
     alvo Barista / tempo parcial = Sol (--data-6)
     alvo FIRE                    = --data-4 (o fogo)
     alvo Coast / o teu trabalho  = neutro, da tinta (o marco mais calmo)
     pensão                       = violeta #6b4fa0, só desta página: o vinho
                                    (--data-7) confundia-se com o --data-4;
                                    contra a Água passa daltonismo (ΔE 8,6) e
                                    visão normal (16,3) nos dois temas
   As linhas dos alvos também diferem no tracejado, e cada uma tem o
   nome escrito no gráfico: a cor nunca é o único sinal.
   ============================================================ */

.fi{
  --fi-port:var(--data-2);
  --fi-barista:var(--data-6);
  --fi-fire:var(--data-4);
  --fi-coast:color-mix(in srgb,var(--ink) 55%,var(--bg));
  --fi-work:var(--fi-coast);
  --fi-part:var(--fi-barista);
  --fi-pension:#6b4fa0;
}

/* ---------- Painel: todos os números à esquerda ----------
   Como na calculadora imobiliária: cola-se ao topo em ecrã largo e, se não
   couber, o corpo rola sozinho com o cabeçalho sempre à vista. */
@media (min-width:1041px){
  .fi .jc-left{align-self:stretch}
  .fi-panel{display:flex;flex-direction:column;max-height:calc(100vh - var(--jc-stick) - 14px)}
  .fi-panel>.jc-hd{flex:none}
  .fi-panel>.jc-bd{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
    scrollbar-width:thin;scrollbar-color:var(--line) transparent}
}
.fi-panel .jc-bd{display:flex;flex-direction:column;gap:0}
.fi-grp{display:flex;flex-direction:column;gap:10px}
.fi-grp+.fi-grp,.fi-grp+.jc-more{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.fi-gh{
  display:flex;align-items:center;gap:8px;margin:0;
  font:700 12px/1.2 var(--font-ui);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);
}
.fi-gh .jc-sw{flex:none}
.fi-sw-barista{background:var(--fi-barista)}

/* ---------- Topo: aviso de estimativas ----------
   Padrão «banner» da foundation, em âmbar (cautela, não erro); o texto fica
   na tinta para passar os 4,5:1 nos dois temas, só o ícone leva a cor. */
.fi-est{
  display:flex;align-items:flex-start;gap:9px;margin:-4px 0 16px;max-width:92ch;
  padding:10px 14px;border-radius:var(--r-md);
  background:color-mix(in srgb,var(--warning) 12%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--warning) 34%,transparent);
  color:var(--ink);font:500 13.5px/1.5 var(--font-ui);
}
.fi-est svg{width:16px;height:16px;flex:none;margin-top:2px;color:color-mix(in srgb,var(--warning) 62%,var(--ink))}
.fi-est b{font-weight:800}

/* expandir/colapsar: um só botão, o ícone mostra o que vai acontecer */
#fiToggleAll .jc-ic-o{display:none}
#fiToggleAll[data-open="false"] .jc-ic-x{display:none}
#fiToggleAll[data-open="false"] .jc-ic-o{display:block}

/* ---------- Campos: uma linha por número ----------
   Rótulo à esquerda, caixa à direita, todas com a mesma largura: os números
   ficam numa coluna e a unidade (moeda, %, anos) vai dentro da caixa, por
   isso os rótulos já não a repetem. Lê-se como uma ficha, sem os buracos da
   grelha de duas colunas com caixas de larguras diferentes. */
.fi{--fi-box:140px}
.fi-panel .jc-fields{display:flex;flex-direction:column;gap:8px}
.fi-panel .jc-field{display:grid;grid-template-columns:minmax(0,1fr) var(--fi-box);align-items:center;column-gap:12px}
.fi-panel .jc-field.jc-wide{grid-column:auto}
/* o «i» corre com o texto: num rótulo que parte em duas linhas fica logo a
   seguir à última palavra, não encostado à caixa */
.fi-panel .jc-fhd{display:block}
.fi-panel .jc-field label{line-height:1.3}
.fi-panel .jc-fhd .jc-i{display:inline-grid;vertical-align:middle;margin:-3px 0 -2px 6px}
.fi-in{position:relative;display:block;min-width:0}
.jc .fi-panel .fi-in input{max-width:none;text-align:right}
.fi-u{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;
  font:600 11.5px/1 var(--font-ui);letter-spacing:.02em;color:var(--muted);
}
.jc .fi-panel .fi-in[data-u="cur"] input{padding-right:46px}
.jc .fi-panel .fi-in[data-u="yr"] input{padding-right:50px}
.jc .fi-panel .fi-in[data-u="pct"] input{padding-right:30px}
.jc .fi-panel .fi-in.fi-nou input{padding-right:12px}
.jc .fi-panel .fi-f-cur input{font-family:var(--font-ui);font-weight:600;text-transform:uppercase}
/* os textos do «i» podem ter parágrafos (linhas em branco no texto) */
#fiPop{white-space:pre-line}
/* nos marcos, o «i» fica logo a seguir ao nome */
.fi .fi-ms .jc-k .jc-i{margin-left:2px}

/* ---------- Os teus marcos ----------
   Três cartões iguais, um por marco: a idade em grande, quando, quanto já
   tens do alvo e o que o marco quer dizer. */
.fi .fi-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:640px){.fi .fi-stats{grid-template-columns:minmax(0,1fr)}}
.fi-ms{display:flex;flex-direction:column;min-width:0}
.fi .fi-ms .jc-k{font-weight:700;color:var(--ink)}
/* «aos 51 anos»: as palavras vêm da língua, só o número é grande */
.fi .fi-ms .jc-v{margin-top:8px;font:600 15px/1.15 var(--font-ui);letter-spacing:0;color:var(--muted)}
.fi .fi-ms .jc-v b{font:600 clamp(28px,2.4vw,36px)/1 var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--ink)}
/* «Já lá estás» / «Depois dos 100»: texto, não número */
.fi .fi-ms .jc-v.fi-vt{font:700 clamp(18px,1.5vw,21px)/1.2 var(--font-ui);letter-spacing:-.01em;color:var(--ink)}
.fi .fi-ms .jc-m{font-family:var(--font-ui);font-size:12.5px;line-height:1.45;margin-top:6px}
.fi-prog{margin-top:14px;display:grid;gap:6px}
.fi-bar{height:8px;border-radius:999px;background:var(--bg);box-shadow:var(--inset-sm);overflow:hidden}
.fi-bar i{display:block;height:100%;border-radius:999px;background:var(--fi-port);min-width:4px}
.fi-prog span{font:500 12.5px/1.3 var(--font-ui);color:var(--muted)}
.fi-prog b,.fi-tgt b{font-family:var(--font-mono);font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.fi-tgt{margin-top:4px;font:500 12.5px/1.4 var(--font-ui);color:var(--muted)}
.fi-def{margin:auto 0 0;padding-top:12px;font:500 13px/1.45 var(--font-ui);color:var(--ink)}
.fi-def::before{content:"";display:block;height:1px;background:var(--line);margin-bottom:11px}
.fi-cur{font-size:.8em;font-weight:600;color:var(--muted)}
.fi-note{margin:0;font:500 13px/1.55 var(--font-ui);color:var(--muted)}
.fi-note b{font-family:var(--font-mono);font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.fi-stats-note{margin:-4px 18px 18px}
.fi-chart-note{margin:-6px 18px 18px}
.fi-note:empty{display:none}
/* página a zero: os marcos dizem o que falta preencher; gráfico e tabela
   vazios não se mostram, fica só a frase */
.fi-empty{grid-column:1/-1;margin:0;font:500 14px/1.55 var(--font-ui);color:var(--muted)}
.fi-empty b{font-weight:700;color:var(--ink)}
.fi.fi-blank .jc-chart,.fi.fi-blank .jc-tablehost{display:none}
.fi.fi-blank .fi-chart-note{margin:18px}
.fi.fi-blank .jc-tblnote{padding-top:16px}
.fi.fi-blank .fi-who+.fi-note{margin-top:0;padding-top:0;border-top:0}

/* ---------- Quem paga os teus gastos ----------
   Uma barra empilhada por caso, a 100% dos gastos; 2px de fundo entre
   segmentos, e o montante de cada um escrito por baixo. */
.fi-who{display:grid;gap:18px}
.fi-wr{display:grid;gap:8px;min-width:0}
.fi-wr-hd{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;font:700 14px/1.3 var(--font-ui);color:var(--ink)}
.fi-wr-hd small{font:500 12.5px/1.3 var(--font-ui);color:var(--muted)}
.fi-stack{display:flex;gap:2px;height:16px;padding:2px;border-radius:7px;background:var(--bg);box-shadow:var(--inset-sm)}
.fi-stack i{display:block;min-width:3px;border-radius:2px}
.fi-stack i:first-child{border-top-left-radius:5px;border-bottom-left-radius:5px}
.fi-stack i:last-child{border-top-right-radius:5px;border-bottom-right-radius:5px}
.fi-amts{display:flex;flex-wrap:wrap;gap:4px 16px}
.fi-amt{display:inline-flex;align-items:center;gap:7px;font:500 12.5px/1.4 var(--font-ui);color:var(--muted)}
.fi-amt b{font-family:var(--font-mono);font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.fi-who+.fi-note{margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}

/* ---------- Gráfico ---------- */
/* amostra de linha tracejada (alvos) na legenda e na dica */
.fi-lsw{width:22px;height:10px;flex:none;display:inline-block;vertical-align:middle;overflow:visible}
/* a dica vive dentro do .jc-chart, onde todo o svg estica a 100% */
.jc-chart .jc-tip svg.fi-lsw{display:inline-block;width:22px;height:10px;margin-right:7px}

/* ---------- Tabela ---------- */
.fi-tag{
  display:inline-flex;align-items:center;gap:5px;margin-left:8px;padding:2px 6px;border-radius:4px;
  font:700 11px/1 var(--font-ui);color:var(--primary-text);background:var(--tint);white-space:nowrap;
}
.fi-tag .jc-sw{width:7px;height:7px;border-radius:2px}

/* ---------- Fases: quanto investes por mês ----------
   Os cartões das fases são os da calculadora de juros compostos (.jc-phase,
   no calc.css). O painel aqui é estreito: a linha fica sempre em três
   colunas (duração · unidade · montante) e o nome desce para baixo. */
.fi-ph-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.fi-panel .jc-phase{padding:11px 12px}
.fi-panel .jc-ph-row{grid-template-columns:52px 86px minmax(0,1fr);max-width:none}
.fi-panel .jc-ph-row .jc-lblin{grid-row:3;grid-column:1/-1}
.jc .fi-panel .jc-ph-row input:not(.jc-lblin){text-align:right}
.fi-ph-note{margin-top:2px}
/* painel estreito: as idades da fase passam à linha de baixo em vez de se cortarem */
.fi-panel .jc-range{white-space:normal;text-wrap:balance;line-height:1.35}
.fi-panel .jc-icon:disabled{opacity:.3;cursor:default;background:none;box-shadow:none}
@media (hover:none) and (pointer:coarse){
  .fi-panel .jc-ph-row{grid-template-columns:62px 100px minmax(0,1fr)}
}
/* legenda do gráfico: uma amostra com as cores das primeiras fases */
.fi-lg-ph{display:inline-flex;gap:1px;width:18px;height:8px;border-radius:2px;overflow:hidden;flex:none}
.fi-lg-ph i{flex:1;display:block}
.fi-tc{display:inline-flex;align-items:center;gap:6px}
.fi-tc .jc-sw{width:7px;height:7px;border-radius:2px}

/* ---------- Modo texto ----------
   Substitui os campos do painel por um texto com todos os números. */
.fi-bulk textarea{min-height:300px}
.fi-bulk-lead,.fi-bulk-msg{margin:0;font:500 13px/1.5 var(--font-ui);color:var(--muted)}
.fi-bulk-msg{color:var(--ink)}
.fi-bulk-msg:empty{display:none}
.fi-bulk .jc-syntax p{margin:0}
.fi-bulk .jc-syntax p+p{margin-top:8px}

/* ---------- Ajuda, barra de baixo ---------- */
.fi-help-p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.6}
.fi-help-p+.fi-help-p{margin-top:10px}
.fi-help-p b{color:var(--ink)}
/* a barra de baixo para à esquerda do botão da calculadora flutuante
   (right:84px / 72px no calc.css), como nos juros compostos */

/* no toque a fonte das caixas sobe para 16px: a caixa alarga para
   «1'200'000 CHF» caber */
@media (hover:none) and (pointer:coarse){
  .fi{--fi-box:148px}
}