/* ============================================================
   Comprar casa na Suíça — só o que é desta página.
   Os componentes base (cartões, campos, tabela, instruções, barra de
   baixo) vêm do calc.css; aqui tudo leva o prefixo bh-. Não declara
   tokens de tema: herda-os do site.css (ou do prelúdio, no ficheiro
   único).
   Partes da prestação (validadas para daltonismo nas duas superfícies Neo,
   as mesmas séries das outras calculadoras):
     juros            = --data-4 (o que vai para o banco)
     custos da casa   = Sol (--data-6): manutenção, encargos, imposto predial
     amortização      = Água (--data-2): paga dívida, fica tua
     renda de hoje    = neutro, da tinta
   Períodos (em toda a página, nunca nas séries do gráfico):
     anual            = violeta (--bh-y)
     mensal           = magenta (--bh-m)
   O texto mistura a cor com a tinta: escurece no tema claro e clareia no
   escuro, sem tokens à parte.
   Cada parte também tem o nome e o montante escritos: a cor nunca é o
   único sinal.
   ============================================================ */

/* o balão dos «i» vive no <body>, fora da .bh: leva as mesmas cores */
.bh,#bhPop{
  --bh-int:var(--data-4);
  --bh-cost:var(--data-6);
  --bh-amort:var(--data-2);
  --bh-rent:color-mix(in srgb,var(--ink) 50%,var(--bg));
  --bh-ok:color-mix(in srgb,var(--positive) 78%,var(--ink));
  --bh-no:color-mix(in srgb,var(--negative) 82%,var(--ink));
  --bh-y:#7357d6;
  --bh-m:#c2418f;
  --bh-y-text:color-mix(in srgb,var(--bh-y) 60%,var(--ink));
  --bh-m-text:color-mix(in srgb,var(--bh-m) 60%,var(--ink));
}

/* ---------- Anual e mensal: uma cor para cada, em toda a página ----------
   Etiqueta (.bh-per) nos rótulos, totais e cabeçalhos; palavra colorida
   (.bh-pw) dentro das frases. */
.bh-per{
  display:inline-block;margin-left:6px;padding:3px 6px 2px;border-radius:5px;vertical-align:1px;
  font:800 10px/1 var(--font-ui);letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;
}
.bh-per-y{color:var(--bh-y-text);background:color-mix(in srgb,var(--bh-y) 14%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bh-y) 32%,transparent)}
.bh-per-m{color:var(--bh-m-text);background:color-mix(in srgb,var(--bh-m) 13%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bh-m) 32%,transparent)}
.bh-pw{font-weight:700;white-space:nowrap}
.bh-pw-y{color:var(--bh-y-text)}
.bh-pw-m{color:var(--bh-m-text)}
/* num campo, a etiqueta abre o texto do «i» (o rótulo fica só com o nome);
   nos resultados vem antes do número */
#bhPop>.bh-per:first-child{margin:0 7px 0 0}
.bh-kv dd .bh-per{margin:0 7px 0 0;vertical-align:1px}
.jc-hd h2 .bh-per{margin-left:8px;vertical-align:1px}

/* ---------- O «i» ----------
   Um botão pequeno em relevo, da família Neo: sobe da superfície; aberto,
   fica afundado e na cor da marca. A área de toque tem 44px de largura e
   pára antes da caixa de baixo, para não lhe roubar toques. */
.bh-i{
  position:relative;flex:none;display:inline-grid;place-items:center;vertical-align:middle;
  width:20px;height:20px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:var(--face);color:var(--muted);
  box-shadow:-2px -2px 4px var(--shadow-light),2px 2px 5px var(--shadow-dark),var(--edge);
  transition:color .13s,box-shadow .13s;
}
.bh-i svg{width:16px;height:16px;display:block}
.bh-i::after{content:"";position:absolute;inset:-12px -12px -6px}
.bh-i:hover{color:var(--ink)}
.bh-i[aria-expanded="true"]{
  background:var(--bg);color:var(--primary-text);
  box-shadow:inset 1.5px 1.5px 3px var(--shadow-dark),inset -1.5px -1.5px 3px var(--shadow-light),var(--edge);
}
.bh-i:focus-visible{outline:none;box-shadow:var(--focus-ring)}
/* nos títulos, nas linhas dos resultados e no aviso do topo */
.bh .jc-hd h2{display:flex;align-items:center;gap:8px;min-width:0}
.bh-kv dt .bh-i{margin:-4px 0 -4px 7px}
.bh-table td.jc-l .bh-i{margin:-4px 0 -4px 8px}
.bh-est .bh-i{margin:-3px 0 -2px 8px}
#bhPop b{font-weight:700;color:var(--ink)}

/* ---------- Ícones ----------
   Cada secção tem um ícone num azulejo da cor da marca, sem número (as
   notas chamam as secções pelo nome). Fechada, fica calma. As colunas dos
   resultados levam a casa nova e a casa usada. */
.bh .jc-hd .jc-cx{gap:9px}
.bh-sic{
  position:relative;display:inline-grid;place-items:center;flex:none;
  width:28px;height:28px;border-radius:9px;background:var(--tint);color:var(--primary-text);
}
.bh-sic .bh-ic{width:17px;height:17px}
.jc-card.jc-closed .bh-sic{color:var(--muted)}
.bh-col-hd h3{display:flex;align-items:center;gap:8px;min-width:0}
.bh-col-hd h3 .bh-ic{width:19px;height:19px;flex:none;color:var(--primary-text)}
/* topo: o guia ao lado das instruções */
.bh-top-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.bh-guide-btn svg{width:16px;height:16px;flex:none}

/* ---------- Os teus números: uma secção por assunto ----------
   Cada secção é o seu próprio cartão, que abre e fecha. Nada se
   cola ao topo e nada tem scroll próprio: quem rola é a página. */
.bh .jc-left{gap:12px}
.bh-sec{scroll-margin-top:calc(var(--jc-stick) + 8px)}
.bh-sec>.jc-hd{padding:12px 16px}
.bh-sec h2 .jc-cx{gap:8px}

/* dentro de cada secção: os campos em grelha, dois por linha na coluna
   estreita, mais em ecrã médio; as caixas alinham-se em baixo mesmo quando
   um rótulo ocupa duas linhas */
.bh-fields{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:10px 12px;align-items:end;padding:14px 16px 16px;
}
.bh-fields[hidden]{display:none}
.bh-span{grid-column:1/-1}

/* ---------- Topo: aviso de estimativas ---------- */
.bh-est{
  display:flex;align-items:center;gap:9px;margin:-4px 0 16px;width:fit-content;max-width:100%;
  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);
}
.bh-est svg{width:16px;height:16px;flex:none;color:color-mix(in srgb,var(--warning) 62%,var(--ink))}
.bh-est b{font-weight:800}
/* sem nowrap: em alemão e romanche a ligação é mais larga do que um telemóvel */
.bh-est a,.bh-help-p a{color:var(--primary-text);font-weight:700;text-decoration:none}
.bh-est a:hover,.bh-help-p a:hover{text-decoration:underline}

#bhToggleAll .jc-ic-o{display:none}
#bhToggleAll[data-open="false"] .jc-ic-x{display:none}
#bhToggleAll[data-open="false"] .jc-ic-o{display:block}

/* ---------- Campos ----------
   Rótulo por cima, caixa por baixo; a unidade (CHF, %, ‰, anos) vai dentro
   da caixa, à direita. */
.bh-sec .jc-field{gap:5px}
/* o «i» logo a seguir ao rótulo, com folga, sempre juntos (.bh-lb); a
   etiqueta anual/mensal não aparece aqui, abre o texto do «i». Se o rótulo
   partir, parte só ele. */
.bh-sec .jc-fhd{display:flex;align-items:center;min-width:0}
.bh-lb{display:flex;align-items:center;gap:8px;min-width:0}
.bh-sec .jc-field label{line-height:1.3;min-width:0}
.bh-sec .jc-fhd .bh-i{margin:-3px 0}
.bh-in{position:relative;display:block;min-width:0}
.jc .bh-sec .bh-in input{max-width:none;text-align:right}
.bh-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 .bh-sec .bh-in[data-u="cur"] input{padding-right:46px}
.jc .bh-sec .bh-in[data-u="yr"] input,
.jc .bh-sec .bh-in[data-u="mo"] input{padding-right:56px}
.jc .bh-sec .bh-in[data-u="pct"] input,
.jc .bh-sec .bh-in[data-u="pm"] input{padding-right:30px}
.bh-hint{margin:0;font:500 12.5px/1.5 var(--font-ui);color:var(--muted)}
.bh-hint:empty{display:none}
.bh-hint b{color:var(--ink);font-weight:700}
/* segmentos (2.º pilar, prazo da fixa): rótulo por cima, com o «i» a seguir */
.bh-segrow{display:flex;flex-direction:column;gap:5px}
/* juros de construção: um título, e as duas caixas lado a lado com as setas
   entre elas — escreves numa, a outra acompanha («≈», em cinzento) */
.bh-pair{display:flex;flex-direction:column;gap:6px;min-width:0}
.bh-pair-row{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:8px;align-items:end}
.bh-pair .bh-pair-row .jc-field{gap:5px;min-width:0}
.bh-pair .bh-pair-row label{font-size:12px}
.bh-link{display:grid;place-items:center;height:44px;color:var(--muted)}
.bh-link svg{width:18px;height:18px}
.jc .bh-sec .bh-in input.bh-auto{color:var(--muted)}
.bh-reset{justify-self:start;margin-top:2px}
/* com rato, caixas mais baixas; ao toque ficam nos 44px do calc.css */
@media (hover:hover) and (pointer:fine){
  .jc .bh-sec .jc-field input,.jc .bh-sec .jc-field select{min-height:38px}
  .bh-link{height:38px}
  .bh-sec .jc-seg button{min-height:34px}
}

/* ---------- Convite para a renda (prestação sem comparação) ---------- */
.bh-nudge{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:18px 18px 0;
  padding:10px 14px;border-radius:var(--r-md);
  background:color-mix(in srgb,var(--primary) 9%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--primary) 28%,transparent);
  font:500 13.5px/1.45 var(--font-ui);color:var(--ink);
}
.bh-nudge span{flex:1 1 220px}
.bh-nudge .jc-btn{flex:none}
#bhPop{white-space:pre-line}

/* ---------- Resultados: duas colunas, nova | usada ---------- */
.bh-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:640px){.bh-cols{grid-template-columns:minmax(0,1fr)}}
.bh-col{
  display:flex;flex-direction:column;gap:12px;min-width:0;
  background:var(--face);border-radius:var(--r-md);box-shadow:var(--raise-sm);padding:15px 17px;
}
.bh-col-hd{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.bh-col-hd h3{margin:0;font:700 15px/1.2 var(--font-ui);color:var(--ink)}
.bh-chip{
  display:inline-flex;align-items:center;gap:5px;padding:4px 9px 4px 7px;border-radius:999px;
  font:700 12px/1 var(--font-ui);color:var(--ink);white-space:nowrap;
}
.bh-chip svg{width:14px;height:14px;flex:none}
.bh-chip.bh-ok{background:color-mix(in srgb,var(--positive) 16%,transparent)}
.bh-chip.bh-ok svg{color:var(--bh-ok)}
.bh-chip.bh-no{background:color-mix(in srgb,var(--negative) 16%,transparent)}
.bh-chip.bh-no svg{color:var(--bh-no)}

/* a taxa de esforço: o número grande e uma régua de 0 a 50% com o máximo */
.bh-big{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.bh-big .bh-k{font:600 13px/1.25 var(--font-ui);color:var(--muted);flex-basis:100%}
.bh-big b{font:600 clamp(28px,2.4vw,36px)/1 var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--ink)}
.bh-big small{font:600 12.5px/1 var(--font-ui);color:var(--muted)}
.bh-gauge{position:relative;height:10px;border-radius:999px;background:var(--bg);box-shadow:var(--inset-sm)}
.bh-gauge i{position:absolute;left:0;top:0;bottom:0;border-radius:999px;min-width:4px}
.bh-gauge i.bh-ok{background:var(--positive)}
.bh-gauge i.bh-no{background:var(--negative)}
.bh-gauge u{position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;border-radius:1px;background:var(--ink);text-decoration:none}

.bh-checks{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.bh-checks li{display:flex;align-items:flex-start;gap:8px;font:500 13px/1.4 var(--font-ui);color:var(--ink)}
.bh-checks svg{width:15px;height:15px;flex:none;margin-top:1px}
.bh-checks .bh-ok svg{color:var(--bh-ok)}
.bh-checks .bh-no svg{color:var(--bh-no)}
.bh-checks span{flex:1;min-width:0}
.bh-checks b{font-family:var(--font-mono);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}

.bh-kv{margin:0;display:grid;gap:5px;padding-top:11px;border-top:1px solid var(--line)}
.bh-kv div{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.bh-kv dt{font:500 13px/1.35 var(--font-ui);color:var(--muted)}
.bh-kv dd{margin:0;text-align:right;font:600 13px/1.35 var(--font-mono);font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
.bh-kv dd small{font:500 12px/1 var(--font-ui);color:var(--muted);margin-left:5px}

.bh-max{margin:0;padding-top:11px;border-top:1px solid var(--line);font:500 13px/1.45 var(--font-ui);color:var(--muted)}
.bh-max b{display:block;margin-top:3px;font:600 18px/1.2 var(--font-mono);font-variant-numeric:tabular-nums;color:var(--ink)}
.bh-max small{font:500 12.5px/1.3 var(--font-ui);color:var(--muted)}

.bh-cur{font-size:.62em;font-weight:600;color:var(--muted);letter-spacing:0}

.bh-note{margin:14px 0 0;font:500 13px/1.55 var(--font-ui);color:var(--muted)}
.bh-note:empty{display:none}
.bh-note b{font-family:var(--font-mono);font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.bh-note-pad{margin:0 18px 18px}

/* ---------- O dinheiro: o mínimo em grande, depois o caminho ---------- */
.bh-need{margin:18px 18px 0}
.bh-need .bh-big b{font-size:clamp(24px,2vw,30px)}
.bh-need .bh-sub{margin:0;font:500 13px/1.45 var(--font-ui);color:var(--muted)}
.bh-need .bh-sub b{font-family:var(--font-mono);font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.bh-stat{display:flex;align-items:flex-start;gap:7px;margin:0;font:700 13.5px/1.4 var(--font-ui);color:var(--ink)}
.bh-stat svg{width:15px;height:15px;flex:none;margin-top:2px}
.bh-stat.bh-ok svg{color:var(--bh-ok)}
.bh-stat.bh-no svg{color:var(--bh-no)}

/* ---------- Tabelas (dinheiro e prestação) ---------- */
.jc-tablehost.bh-table{max-height:none}
.bh-table thead th:first-child{text-align:left}
.bh-table tbody td.jc-l{
  white-space:normal;min-width:170px;height:auto;padding-block:8px;
  font:500 13px/1.35 var(--font-ui);color:var(--ink);
}
.bh-table tbody td.jc-l small{display:block;font-size:12px;color:var(--muted)}
.bh-table tbody td.bh-na,.bh-table tbody tr.bh-tot td.bh-na{color:color-mix(in srgb,var(--muted) 60%,transparent);font-weight:400}
.bh-table tbody tr.bh-tot td{color:var(--ink);font-weight:700;border-top:1px solid color-mix(in srgb,var(--ink) 22%,transparent)}
.bh-table tbody tr.bh-tot td.jc-l{font-weight:700}
.bh-table tbody tr.bh-soft td{color:var(--muted)}
.bh-table tbody tr.bh-soft td.jc-l{color:var(--muted)}
.bh-table tbody tr td.bh-pos{color:var(--bh-no)}
.bh-table tbody tr td.bh-neg{color:var(--bh-ok)}
/* a diferença para a renda de hoje logo a seguir ao total, com fundo próprio */
.bh-table tbody tr.bh-vsrow td{background:color-mix(in srgb,var(--primary) 7%,var(--face))}
.bh-table tbody td:not(.jc-l) small{display:block;font:500 11.5px/1.3 var(--font-ui);color:var(--muted)}
/* bloco «depois dos anos de amortização»: uma linha de título a toda a largura */
.bh-table tbody tr.bh-sec td{padding-top:20px;padding-bottom:8px;border-top:1px solid color-mix(in srgb,var(--ink) 22%,transparent);background:none!important}
.bh-table tbody tr.bh-sec td.jc-l b{font:700 13.5px/1.35 var(--font-ui);color:var(--ink)}
.bh-table tbody tr:last-child td{border-bottom:0}
/* a coluna da renda, à parte das quatro hipóteses */
.bh-table .bh-rc{border-left:1px solid color-mix(in srgb,var(--ink) 22%,transparent)}
.bh-table .jc-sw{display:inline-block;vertical-align:middle;margin-right:7px}

/* ---------- Prestação: barras empilhadas ao lado da renda ---------- */
.bh-bars{display:grid;gap:14px;margin:18px 18px 4px}
.bh-bars:empty{display:none}
.bh-br{display:grid;gap:6px;min-width:0}
.bh-br-hd{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 10px;font:700 13.5px/1.3 var(--font-ui);color:var(--ink)}
.bh-br-l{min-width:0}
.bh-br-v{display:inline-flex;align-items:center;gap:8px;margin-left:auto;white-space:nowrap}
.bh-br-hd b{font:600 14px/1 var(--font-mono);font-variant-numeric:tabular-nums}
/* a mais ou a menos do que a renda de hoje (as mesmas cores da tabela) */
.bh-vs{padding:4px 8px 3px;border-radius:999px;background:var(--tint);font:700 11.5px/1 var(--font-ui);color:var(--ink)}
.bh-vs-up{background:color-mix(in srgb,var(--negative) 13%,transparent);color:color-mix(in srgb,var(--negative) 68%,var(--ink))}
.bh-vs-down{background:color-mix(in srgb,var(--positive) 15%,transparent);color:color-mix(in srgb,var(--positive) 68%,var(--ink))}
.bh-track{position:relative;height:18px;padding:2px;border-radius:7px;background:var(--bg);box-shadow:var(--inset-sm)}
.bh-fill{display:flex;gap:2px;height:100%;min-width:3px}
.bh-fill i{display:block;min-width:2px;border-radius:2px}
.bh-fill i:first-child{border-top-left-radius:5px;border-bottom-left-radius:5px}
.bh-fill i:last-child{border-top-right-radius:5px;border-bottom-right-radius:5px}
/* o que pagas hoje: um traço vertical em cada barra */
.bh-mark{position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;border-radius:1px;background:var(--ink)}
.bh-lsw{display:inline-block;width:2px;height:12px;border-radius:1px;background:var(--ink);flex:none;margin:0 4px}
.bh-empty{margin:0;font:500 14px/1.55 var(--font-ui);color:var(--muted)}
.bh-empty b{font-weight:700;color:var(--ink)}
.bh-empty-pad{margin:18px}
.bh.bh-blank .bh-need{margin-bottom:18px}
.bh.bh-blank .bh-table,.bh.bh-blank .bh-bars{display:none}
.bh-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Ajuda, barra de baixo ---------- */
.bh-help-p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.6}
.bh-help-p+.bh-help-p{margin-top:10px}
.bh-help-p b{color:var(--ink)}
.bh-dock{right:20px}
@media (max-width:560px){.bh-dock{right:14px}}

@media (max-width:400px){
  .bh-col{padding:14px}
  .bh-need{margin:14px 14px 0}
  .bh-bars{margin:14px 14px 4px}
  .bh-nudge{margin:14px 14px 0}
  .bh-fields{padding:12px 14px 14px}
  .bh-sec>.jc-hd{padding:12px 14px}
}