/* ==== resultados.css · só em body[data-css~="resultados"] ==== */
/* =====================================================================
   resultados.css · o início DEPOIS das três perguntas (v3.2, revista 27/09)
   Só o que é desta página. Tudo o resto vem do base.css.
   Dois estados: «serve-te» (resultados.html) e «hoje nada aqui» (resultados-2.html).
   ===================================================================== */

:where(body[data-css~="resultados"]) /* o topo do resultado: as respostas, :where(body[data-css~="resultados"]) o título que diz a verdade e o carimbo por baixo */
.resultado{ padding-block:var(--e-4) var(--e-2); }
:where(body[data-css~="resultados"]) .resultado-respostas{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--e-2) var(--e-4); }
:where(body[data-css~="resultados"]) .resultado-respostas .respostas{ align-items:center; }
:where(body[data-css~="resultados"]) .resp-mudar{ min-height:var(--alvo); padding-inline:var(--e-2); white-space:nowrap; }
:where(body[data-css~="resultados"]) /* é um título de resultado, :where(body[data-css~="resultados"]) não um herói: o t-2 chega e deixa o cartão subir */
.resultado h1{ font-size:var(--t-2); line-height:1.15; margin-top:var(--e-5); max-width:30ch; }
:where(body[data-css~="resultados"]) .resultado-sub{ color:var(--tinta-2); margin-top:var(--e-3); max-width:var(--larg-texto); }
:where(body[data-css~="resultados"]) .resultado .carimbo{ margin-top:var(--e-3); }

/* telemóvel: as respostas partem em linhas (27/09, auditoria do telemóvel: numa só linha que deslizava
   de lado, sem sinal nenhum de que havia mais, a pastilha cortada na borda não se lia como «há mais») */
@media (max-width:1023px){
  :where(body[data-css~="resultados"]) .resp-rot{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  :where(body[data-css~="resultados"]) .resultado-respostas .respostas{ flex-wrap:wrap; }
  :where(body[data-css~="resultados"]) .resultado-respostas .resposta{ flex:none; max-width:100%; }
  :where(body[data-css~="resultados"]) .resultado h1{ margin-top:var(--e-4); }}

:where(body[data-css~="resultados"]) /* no resultado, :where(body[data-css~="resultados"]) a distância substitui o distrito: é ela que responde a «perto?» */
.cartao-terra .dist{ color:var(--tinta-2); }
:where(body[data-css~="resultados"]) .cartao-razao-mais{ font-size:var(--t-rotulo); color:var(--tinta-2); margin-top:calc(-1 * var(--e-2)); }

:where(body[data-css~="resultados"]) /* «Porque te serve»: a razão do cartão dita por inteiro, :where(body[data-css~="resultados"]) e o que só a pessoa sabe */
.porque{ background:var(--branco); border:1px solid var(--linha); border-radius:var(--r-cartao); padding:var(--e-5) 20px; display:flex; flex-direction:column; gap:var(--e-5); }
:where(body[data-css~="resultados"]) .porque h2{ font-size:var(--t-3); }
:where(body[data-css~="resultados"]) .porque-morada{ display:grid; grid-template-columns:24px 1fr; gap:var(--e-3); padding:var(--e-3) var(--e-4); background:var(--oliva-clara); border-radius:var(--r-campo); color:var(--tinta); font-size:var(--t-apoio); }
:where(body[data-css~="resultados"]) .porque-morada .i{ color:var(--oliva); width:22px; height:22px; margin-top:1px; }
:where(body[data-css~="resultados"]) .porque-cols{ display:grid; gap:var(--e-5); }
:where(body[data-css~="resultados"]) .porque .vantagens{ margin-top:var(--e-3); gap:var(--e-4); }
:where(body[data-css~="resultados"]) .porque-confirma .vantagens .i{ color:var(--tinta-2); }
:where(body[data-css~="resultados"]) .porque-nota{ font-size:var(--t-apoio); color:var(--tinta-2); }
:where(body[data-css~="resultados"]) .porque-fim{ display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:var(--e-4) var(--e-5); padding-top:var(--e-4); border-top:1px solid var(--linha); }
:where(body[data-css~="resultados"]) .porque-prazo b{ display:block; font-family:var(--serifa); font-size:var(--t-3); font-weight:500; line-height:1.2; color:var(--telha-esc); }
:where(body[data-css~="resultados"]) .porque-prazo span{ font-size:var(--t-apoio); color:var(--tinta-2); }
:where(body[data-css~="resultados"]) .porque-bt .bt-nota{ max-width:22rem; }
:where(body[data-css~="resultados"]) .porque-ajuda{ font-size:var(--t-apoio); color:var(--tinta-2); margin-top:calc(-1 * var(--e-3)); }
:where(body[data-css~="resultados"]) .porque-ajuda .lig{ display:inline; padding:0; min-height:0; }
:where(body[data-css~="resultados"]) .porque-ajuda span{ display:block; font-size:var(--t-rotulo); margin-top:var(--e-1); }

:where(body[data-css~="resultados"]) /* blocos do resultado, :where(body[data-css~="resultados"]) um por baixo do outro */
.res-blocos > * + *{ margin-top:var(--e-6); }
:where(body[data-css~="resultados"]) .res-blocos > .aviso{ max-width:40rem; }

:where(body[data-css~="resultados"]) /* «N perto não te servem»: um botão que se vê como botão, :where(body[data-css~="resultados"]) numa linha, :where(body[data-css~="resultados"]) 56 px */
.res-blocos .recolher{ border:0; }
:where(body[data-css~="resultados"]) .res-blocos .recolher summary{ min-height:56px; padding-inline:20px; background:var(--branco); border:1.5px solid var(--linha-forte); border-radius:var(--r-cartao); color:var(--tinta); font-size:var(--t-corpo); white-space:nowrap; }
:where(body[data-css~="resultados"]) .res-blocos .recolher summary:hover{ border-color:var(--tinta); }
:where(body[data-css~="resultados"]) .res-blocos .recolher summary > span:first-child{ overflow:hidden; text-overflow:ellipsis; }
:where(body[data-css~="resultados"]) .recolher-acao{ margin-left:auto; color:var(--telha-esc); font-size:var(--t-apoio); }
:where(body[data-css~="resultados"]) .res-blocos .recolher summary::after{ color:var(--telha-esc); margin-left:calc(-1 * var(--e-1)); }
:where(body[data-css~="resultados"]) .recolher-acao .fechar-t{ display:none; }
:where(body[data-css~="resultados"]) .recolher[open] .recolher-acao .abrir{ display:none; }
:where(body[data-css~="resultados"]) .recolher[open] .recolher-acao .fechar-t{ display:inline; }
:where(body[data-css~="resultados"]) .res-blocos .recolher .cartoes{ margin-top:var(--e-4); }
:where(body[data-css~="resultados"]) .res-blocos .recolher > div{ padding-bottom:0; }

:where(body[data-css~="resultados"]) /* o aviso: o texto diz o que o alerta faz hoje, :where(body[data-css~="resultados"]) e mais nada */
.aviso-sub{ font-size:var(--t-apoio); color:var(--tinta-2); margin-top:var(--e-2); max-width:34rem; }
:where(body[data-css~="resultados"]) .aviso-nota{ margin-top:var(--e-3); }

:where(body[data-css~="resultados"]) /* o estado vazio: «Com este rendimento…» sem o filete lateral, :where(body[data-css~="resultados"]) com antetítulo oliva */
.enquanto-ant{ color:var(--oliva); margin-bottom:var(--e-2); }
:where(body[data-css~="resultados"]) .enquanto .enquanto-intro{ font-size:var(--t-apoio); color:var(--tinta-2); margin-top:var(--e-2); }
:where(body[data-css~="resultados"]) .enquanto li .lig{ min-height:0; padding-block:var(--e-2) 2px; text-align:left; }
:where(body[data-css~="resultados"]) .enquanto li p + p{ margin-top:var(--e-2); }
:where(body[data-css~="resultados"]) .enquanto li .enquanto-passo{ font-weight:600; color:var(--tinta); font-size:var(--t-corpo); padding-top:var(--e-2); }
:where(body[data-css~="resultados"]) .enquanto-atencao{ display:grid; grid-template-columns:20px 1fr; gap:var(--e-2); }
:where(body[data-css~="resultados"]) .enquanto-atencao .i{ width:18px; height:18px; margin-top:3px; color:var(--madeira-esc); }
:where(body[data-css~="resultados"]) .enquanto .aviso-linha{ margin-top:var(--e-3); }

:where(body[data-css~="resultados"]) /* no telemóvel, :where(body[data-css~="resultados"]) os dois blocos do vazio empilham com o mesmo intervalo dos outros */
.res-vazio{ display:grid; gap:var(--e-6); }

:where(body[data-css~="resultados"]) /* «Também perto do Porto»: as inscrições sempre abertas mais próximas, :where(body[data-css~="resultados"]) com a condição que decide */
.perto-sub{ font-size:var(--t-apoio); color:var(--tinta-2); margin-block:var(--e-1) var(--e-3); }
:where(body[data-css~="resultados"]) .perto .lista-linhas b{ font-size:var(--t-corpo); font-family:var(--serifa); }
:where(body[data-css~="resultados"]) .perto > .lig{ margin-top:var(--e-2); }

:where(body[data-css~="resultados"]) /* o resto da primeira página, :where(body[data-css~="resultados"]) depois do resultado */
.depois{ padding-block:var(--e-7) 0; border-top:1px solid var(--linha); }
:where(body[data-css~="resultados"]) .depois-grelha{ display:grid; gap:var(--e-5); }
:where(body[data-css~="resultados"]) .depois .portas{ grid-template-columns:1fr; }
/* o título da porta a tinta: dentro do <span> herdava a tinta 2 e parecia desativado */
:where(body[data-css~="resultados"]) .depois .porta b{ color:var(--tinta); }

@media (min-width:640px){
  :where(body[data-css~="resultados"]) .porque{ padding:var(--e-6); }
  :where(body[data-css~="resultados"]) .porque-cols{ grid-template-columns:1fr 1fr; gap:var(--e-5) var(--e-6); }}

@media (min-width:1024px){
  :where(body[data-css~="resultados"]) .resultado{ padding-block:var(--e-6) var(--e-6); }
  :where(body[data-css~="resultados"]) .resultado-respostas .resp-rot{ flex:0 0 auto; margin-right:var(--e-2); }
  :where(body[data-css~="resultados"]) /* serve-te: o cartão na coluna dos cartões, :where(body[data-css~="resultados"]) a razão ao lado com o espaço de duas */
  .res-serve{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--e-5); align-items:start; }
  :where(body[data-css~="resultados"]) .res-serve .cartao{ grid-column:1; }
  :where(body[data-css~="resultados"]) .res-serve .porque{ grid-column:2 / span 2; }
  :where(body[data-css~="resultados"]) /* vazio: o que fazer hoje à esquerda, :where(body[data-css~="resultados"]) o que há perto à direita */
  .res-vazio{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:var(--e-6); align-items:start; }
  :where(body[data-css~="resultados"]) .res-vazio .perto{ padding-top:var(--e-5); }
  :where(body[data-css~="resultados"]) .depois-grelha{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); align-items:start; }}
/* entre 1024 e 1099 px o painel fica com ~650 px: uma coluna lê-se melhor do que duas apertadas */
@media (min-width:1024px) and (max-width:1099px){
  :where(body[data-css~="resultados"]) .porque-cols{ grid-template-columns:1fr; }}

/* a fotografia em absoluto dentro do cartão passou para o base.css */