/* ==== posso.css · só em body[data-css~="posso"] ==== */
:where(body[data-css~="posso"]) /* =====================================================================
   rendaacessivel.pt · posso.css · só a página «Posso concorrer?»
   Assenta no base.css; aqui só o que esta página tem de seu:
   a grelha com o painel das respostas, :where(body[data-css~="posso"]) a conta à vista, :where(body[data-css~="posso"]) o veredicto
   grande e as linhas dos concursos com o número como imagem.
   Nenhum font-size fora de var(--t-*).
   ===================================================================== */

.posso{ padding-block:var(--abre) var(--e-secao); }
:where(body[data-css~="posso"]) .posso-cab h1{ max-width:14ch; }
:where(body[data-css~="posso"]) .posso-sub{ color:var(--tinta-2); margin-top:var(--e-3); max-width:34ch; }
:where(body[data-css~="posso"]) .posso-sub b{ color:var(--tinta); font-weight:600; }
:where(body[data-css~="posso"]) .posso-corpo{ margin-top:var(--e-5); }

/* a pergunta desta página vive num cartão um pouco mais largo e calmo */
:where(body[data-css~="posso"]) .pergunta{ scroll-margin-top:calc(var(--topo) + 16px); }
:where(body[data-css~="posso"]) .pergunta h2:focus,:where(body[data-css~="posso"]) .pergunta legend:focus,:where(body[data-css~="posso"]) .resultado-cab:focus{ outline:0; box-shadow:none; }
:where(body[data-css~="posso"]) .pergunta .opcoes-1{ grid-template-columns:1fr; }
:where(body[data-css~="posso"]) .pergunta .opcoes-faixas{ grid-template-columns:1fr; }
:where(body[data-css~="posso"]) .pergunta-pes .bt{ margin-left:auto; }
:where(body[data-css~="posso"]) .pergunta-pes .lig + .lig{ margin-left:auto; }
:where(body[data-css~="posso"]) .erro[hidden]{ display:none; }

:where(body[data-css~="posso"]) /* as respostas dadas, :where(body[data-css~="posso"]) por cima do cartão (telemóvel) */
.respostas-cab{ font-size:var(--t-apoio); color:var(--tinta-2); margin-bottom:var(--e-2); }
:where(body[data-css~="posso"]) .posso-respostas{ margin-bottom:var(--e-4); }
:where(body[data-css~="posso"]) .resposta .x{ font-size:var(--t-corpo); line-height:1; color:var(--tinta-2); }

:where(body[data-css~="posso"]) /* ---------- a conta, :where(body[data-css~="posso"]) à vista ---------- */
/* cada termo com o que é por baixo: ninguém tem de adivinhar o 14 nem o 35% */
.conta{ background:var(--branco); border:1px solid var(--linha); border-radius:var(--r-cartao); padding:var(--e-4) 20px; }
:where(body[data-css~="posso"]) .conta-tit{ font-size:var(--t-rotulo); font-weight:600; color:var(--tinta-2); }
:where(body[data-css~="posso"]) .conta-linha{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:var(--e-2) var(--e-3); margin-top:var(--e-3); }
:where(body[data-css~="posso"]) .termo{ display:grid; gap:2px; }
:where(body[data-css~="posso"]) .termo b{ font-family:var(--serifa); font-size:var(--t-3); font-weight:500; line-height:1.15; white-space:nowrap; }
:where(body[data-css~="posso"]) .termo span{ font-size:var(--t-rotulo); color:var(--tinta-2); line-height:1.25; }
:where(body[data-css~="posso"]) .termo.vazio b{ color:var(--tinta-3); }
:where(body[data-css~="posso"]) .termo.total b{ color:var(--oliva); }
:where(body[data-css~="posso"]) .op{ font-family:var(--serifa); font-size:var(--t-3); line-height:1.15; color:var(--tinta-3); }
:where(body[data-css~="posso"]) .conta-nota{ font-size:var(--t-apoio); color:var(--tinta-2); margin-top:var(--e-3); padding-top:var(--e-3); border-top:1px solid var(--linha); }

/* ---------- o painel do computador: o que respondeste e a conta ---------- */
:where(body[data-css~="posso"]) .painel{ display:none; }
:where(body[data-css~="posso"]) .painel-lista{ list-style:none; margin:var(--e-3) 0 0; padding:0; border-top:1px solid var(--linha); }
:where(body[data-css~="posso"]) .painel-lista li{ border-bottom:1px solid var(--linha); }
:where(body[data-css~="posso"]) .painel-lista button{
  display:grid; grid-template-columns:1fr auto; gap:2px var(--e-3); align-items:center; width:100%;
  min-height:64px; padding:var(--e-2) 0; border:0; background:none; text-align:left; color:var(--tinta);
}
:where(body[data-css~="posso"]) .painel-lista button:disabled{ cursor:default; }
:where(body[data-css~="posso"]) .painel-lista .p-rot{ font-size:var(--t-rotulo); font-weight:600; color:var(--tinta-2); }
:where(body[data-css~="posso"]) .painel-lista .p-val{ grid-column:1; font-family:var(--serifa); font-size:var(--t-3); line-height:1.2; }
:where(body[data-css~="posso"]) .painel-lista .p-val.por{ font-family:var(--letra); font-size:var(--t-apoio); color:var(--tinta-3); }
:where(body[data-css~="posso"]) .painel-lista .p-mudar{ grid-row:1 / span 2; grid-column:2; font-size:var(--t-apoio); font-weight:600; color:var(--telha-esc); text-decoration:underline; text-decoration-color:var(--madeira); text-decoration-thickness:2px; text-underline-offset:5px; }
:where(body[data-css~="posso"]) .painel-lista li.agora .p-rot{ color:var(--telha-esc); }
:where(body[data-css~="posso"]) .painel .conta{ margin-top:var(--e-5); }
:where(body[data-css~="posso"]) .privado{ display:flex; gap:var(--e-2); align-items:flex-start; margin-top:var(--e-4); font-size:var(--t-apoio); color:var(--tinta-2); }
:where(body[data-css~="posso"]) .privado .i{ color:var(--oliva); width:20px; height:20px; margin-top:2px; }

/* ---------- o resultado ---------- */
:where(body[data-css~="posso"]) .resultado > * + *{ margin-top:var(--e-5); }
:where(body[data-css~="posso"]) .resultado-cab{ display:block; }
:where(body[data-css~="posso"]) .veredicto.grande{ padding:var(--e-5) 20px; border-radius:var(--r-cartao); }
:where(body[data-css~="posso"]) .veredicto.grande .i{ width:28px; height:28px; margin-top:4px; }
:where(body[data-css~="posso"]) .veredicto.grande b{ font-family:var(--serifa); font-size:var(--t-2); font-weight:450; line-height:1.15; letter-spacing:-.01em; text-wrap:balance; }
:where(body[data-css~="posso"]) .veredicto.grande p{ font-size:var(--t-corpo); margin-top:var(--e-3); color:var(--tinta); }
:where(body[data-css~="posso"]) .veredicto.grande p + p{ margin-top:var(--e-2); }
:where(body[data-css~="posso"]) .veredicto.nao .i{ color:var(--tinta-2); }
:where(body[data-css~="posso"]) .resultado-accao .bt{ width:100%; }
:where(body[data-css~="posso"]) .resultado-accao .bt-nota{ text-align:center; }
:where(body[data-css~="posso"]) .recomecar{ display:flex; flex-wrap:wrap; gap:0 var(--e-5); }

:where(body[data-css~="posso"]) .grupo > h2{ font-size:var(--t-3); }
:where(body[data-css~="posso"]) .grupo > p{ font-size:var(--t-apoio); color:var(--tinta-2); margin-top:var(--e-1); }
:where(body[data-css~="posso"]) .grupo .cartoes{ margin-top:var(--e-4); }
:where(body[data-css~="posso"]) .grupo-perto{ font-size:var(--t-rotulo); font-weight:600; color:var(--tinta-2); margin-top:var(--e-4); }

:where(body[data-css~="posso"]) /* linhas de concurso sem fotografia: o número é a imagem, :where(body[data-css~="posso"]) um só fundo */
.abertos{ list-style:none; margin:var(--e-3) 0 0; padding:0; border-top:1px solid var(--linha); }
:where(body[data-css~="posso"]) .abertos a{
  display:grid; grid-template-columns:64px minmax(0,1fr) auto; gap:var(--e-3) var(--e-4); align-items:center;
  padding-block:var(--e-4); border-bottom:1px solid var(--linha); color:var(--tinta); text-decoration:none;
}
:where(body[data-css~="posso"]) .abertos a:hover .ab-terra{ color:var(--telha-esc); }
:where(body[data-css~="posso"]) .num-mini{ display:grid; place-items:center; align-content:center; width:64px; height:64px; border-radius:var(--r-campo); background:var(--cal-2); text-align:center; }
:where(body[data-css~="posso"]) .num-mini b{ font-family:var(--serifa); font-size:var(--t-3); font-weight:500; line-height:1; }
:where(body[data-css~="posso"]) .num-mini span{ font-size:var(--t-rotulo); color:var(--tinta-2); line-height:1.2; margin-top:2px; }
:where(body[data-css~="posso"]) .ab-txt{ display:grid; gap:2px; min-width:0; }
:where(body[data-css~="posso"]) .ab-terra{ font-family:var(--serifa); font-size:var(--t-3); line-height:1.2; font-weight:500; }
:where(body[data-css~="posso"]) .ab-terra small{ font-family:var(--letra); font-size:var(--t-apoio); font-weight:400; color:var(--tinta-2); margin-left:6px; }
:where(body[data-css~="posso"]) .ab-meta{ font-size:var(--t-apoio); color:var(--tinta-2); }
:where(body[data-css~="posso"]) .ab-txt .cartao-razao{ margin-top:2px; align-items:flex-start; }
:where(body[data-css~="posso"]) .ab-txt .cartao-razao .i{ width:18px; height:18px; margin-top:3px; }
:where(body[data-css~="posso"]) .abertos .seta{ color:var(--tinta-2); width:22px; height:22px; }
:where(body[data-css~="posso"]) .recolher .abertos{ margin-top:0; }

/* etiqueta dentro do cartão do resultado: a mesma do resto do site */
:where(body[data-css~="posso"]) .cartao-razao .i{ width:18px; height:18px; }

:where(body[data-css~="posso"]) /* a faixa do barómetro, :where(body[data-css~="posso"]) no fim */
.menos-gente b{ font-weight:700; }

:where(body[data-css~="posso"]) /* a conta em recibo, :where(body[data-css~="posso"]) no painel: uma linha por passo, :where(body[data-css~="posso"]) o total a oliva */
.recibo{ margin-top:var(--e-3); }
:where(body[data-css~="posso"]) .recibo p{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--e-3); padding-block:6px; margin:0; font-size:var(--t-apoio); color:var(--tinta-2); }
:where(body[data-css~="posso"]) .recibo p + p{ margin-top:0; }
:where(body[data-css~="posso"]) .recibo b{ font-family:var(--serifa); font-size:var(--t-3); font-weight:500; color:var(--tinta); white-space:nowrap; }
:where(body[data-css~="posso"]) .recibo b.vazio{ color:var(--tinta-3); }
:where(body[data-css~="posso"]) .recibo .r-total{ margin-top:var(--e-2); padding-top:var(--e-3); border-top:1.5px solid var(--tinta); color:var(--tinta); font-weight:600; }
:where(body[data-css~="posso"]) .recibo .r-total b{ color:var(--oliva); }

/* um só concurso que serve: o cartão deita-se, fotografia ao lado */
@media (min-width:640px){
  :where(body[data-css~="posso"]) .grupo .cartoes.um{ grid-template-columns:1fr; }
  :where(body[data-css~="posso"]) .cartoes.um .cartao{ flex-direction:row; }
  :where(body[data-css~="posso"]) .cartoes.um .cartao-img{ flex:0 0 44%; aspect-ratio:auto; min-height:260px; }
  :where(body[data-css~="posso"]) .cartoes.um .cartao-img.sem-foto{ aspect-ratio:auto; }}

/* ---------- o que contamos (perguntas curtas) ---------- */
:where(body[data-css~="posso"]) .contamos{ margin-top:var(--e-7); }
:where(body[data-css~="posso"]) .contamos .pergunta-freq summary{ font-size:var(--t-3); }
:where(body[data-css~="posso"]) .contamos .cabeca{ margin-bottom:var(--e-2); }
:where(body[data-css~="posso"]) .contamos .texto{ max-width:none; border-top:1px solid var(--linha); }
:where(body[data-css~="posso"]) .portas-tit{ font-size:var(--t-3); margin:0 0 var(--e-4); }

/* ---------- a partir de 640 px ---------- */
@media (min-width:640px){
  :where(body[data-css~="posso"]) .pergunta .opcoes-faixas{ grid-template-columns:1fr 1fr; }
  :where(body[data-css~="posso"]) .pergunta .opcoes-1{ grid-template-columns:repeat(3,1fr); }
  :where(body[data-css~="posso"]) .veredicto.grande{ padding:var(--e-6); }
  :where(body[data-css~="posso"]) .conta{ padding:var(--e-5) var(--e-6); }
  :where(body[data-css~="posso"]) .resultado-accao .bt{ width:auto; }
  :where(body[data-css~="posso"]) .resultado-accao .bt-nota{ text-align:left; }
  :where(body[data-css~="posso"]) .grupo .cartoes{ grid-template-columns:repeat(2,1fr); }}

/* ---------- a partir de 1024 px: pergunta à esquerda, o que respondeste à direita ---------- */
@media (min-width:1024px){
  :where(body[data-css~="posso"]) .posso{ padding-block:var(--abre) var(--e-secao); }
  :where(body[data-css~="posso"]) .posso-grelha{ display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:var(--e-8); align-items:start; }
  :where(body[data-css~="posso"]) .posso-cab h1{ max-width:none; }
  :where(body[data-css~="posso"]) .posso-sub{ max-width:44ch; }
  :where(body[data-css~="posso"]) .painel{ display:block; position:sticky; top:calc(var(--topo) + 24px); background:var(--cal-2); border-radius:var(--r-cartao); padding:var(--e-6); }
  :where(body[data-css~="posso"]) .painel h2{ font-size:var(--t-3); }
  :where(body[data-css~="posso"]) .posso-respostas{ display:none; }
  :where(body[data-css~="posso"]) .resultado .conta.so-telemovel{ display:none; }
  :where(body[data-css~="posso"]) .grupo .cartoes{ grid-template-columns:repeat(2,1fr); }
  :where(body[data-css~="posso"]) .pergunta{ padding:var(--e-7) var(--e-7) var(--e-6); }
  :where(body[data-css~="posso"]) .pergunta .opcoes{ gap:var(--e-3); }}

/* a fotografia nunca estica o cartão: o recorte segue a proporção da caixa */
:where(body[data-css~="posso"]) .recibo p > span{ flex:none; }
:where(body[data-css~="posso"]) .recibo p:not(:has(b)) > span{ flex:1 1 auto; }

:where(body[data-css~="posso"]) /* ---------- revisão de 27/09: a conta numa linha, :where(body[data-css~="posso"]) o índice, :where(body[data-css~="posso"]) a partilha no fim ---------- */
.posso-sub{ max-width:56ch; text-wrap:balance; }
:where(body[data-css~="posso"]) .conta-curta{ margin-top:var(--e-3); padding-top:var(--e-3); border-top:1px solid var(--linha); font-size:var(--t-apoio); color:var(--tinta-2); font-variant-numeric:tabular-nums; }
:where(body[data-css~="posso"]) .indice{ margin-top:var(--e-3); font-size:var(--t-apoio); color:var(--tinta-2); }
:where(body[data-css~="posso"]) .indice{ line-height:1.3; }
:where(body[data-css~="posso"]) .indice a{ display:inline-block; padding-block:11px; margin-inline:2px; color:var(--tinta-2); text-decoration:underline; text-decoration-color:var(--linha-forte); text-underline-offset:4px; white-space:nowrap; }
:where(body[data-css~="posso"]) .indice a:hover{ color:var(--telha-esc); }
:where(body[data-css~="posso"]) .partilha{ display:flex; flex-wrap:wrap; align-items:center; gap:0 var(--e-3); }
:where(body[data-css~="posso"]) .partilha .i{ width:20px; height:20px; }
:where(body[data-css~="posso"]) .partilha-nota{ font-size:var(--t-apoio); color:var(--tinta-2); }
:where(body[data-css~="posso"]) .resposta-recomecar{ border-style:dashed; color:var(--tinta-2); font-weight:600; }
:where(body[data-css~="posso"]) .recibo b.vazio{ font-family:var(--letra); font-size:var(--t-apoio); font-weight:400; color:var(--tinta-3); }
:where(body[data-css~="posso"]) .painel-recomecar{ margin-top:var(--e-2); }
:where(body[data-css~="posso"]) .painel-recomecar[hidden]{ display:none; }

/* telemóvel: depois da 1.ª pergunta o subtítulo recolhe; as respostas quebram em duas linhas (nada fica fora do ecrã sem aviso) */
@media (max-width:1023px){
  :where(body[data-css~="posso"]) .posso:not([data-passo="1"]) .posso-sub{ display:none; }
  :where(body[data-css~="posso"]) .posso:not([data-passo="1"]) .posso-corpo{ margin-top:var(--e-4); }
  :where(body[data-css~="posso"]) .posso-respostas .respostas{ display:flex; flex-wrap:wrap; gap:var(--e-2); }
  :where(body[data-css~="posso"]) .posso-respostas .resposta{ flex:0 1 auto; max-width:100%; min-height:44px; padding:0 12px 0 14px; }}
@media (min-width:1024px){
  :where(body[data-css~="posso"]) .conta-curta{ display:none; }}
:where(body[data-css~="posso"]) /* a renda máxima é uma frase («entre 320 e 490 €»): vai para a linha de baixo, :where(body[data-css~="posso"]) nunca sai do cartão */
.recibo .r-total{ display:block; }
:where(body[data-css~="posso"]) .recibo .r-total b{ display:block; margin-top:4px; white-space:normal; }

:where(body[data-css~="posso"]) /* o rodapé cola ao último bloco, :where(body[data-css~="posso"]) que já traz o seu espaço (estava num style="" no HTML) */
.rodape{ margin-top:0; }

/* ---------- gerador v3 (27/09): o que a maqueta tinha em style="" e o «Ver o concurso» do cartão comum ---------- */
:where(body[data-css~="posso"]) .pergunta .entrada-ic{ margin-top:var(--e-4); }
:where(body[data-css~="posso"]) .posso noscript .enquanto p{ margin-top:var(--e-3); }
:where(body[data-css~="posso"]) .posso-corpo noscript .enquanto{ margin-top:var(--e-5); }
:where(body[data-css~="posso"]) .cartao-ver{ display:flex; align-items:center; gap:6px; margin-top:auto; padding-top:var(--e-3); font-weight:600; color:var(--telha-esc); font-size:var(--t-apoio); }
:where(body[data-css~="posso"]) .cartao-ver .i{ width:16px; height:16px; }
:where(body[data-css~="posso"]) .cartao-ver + .cartao-pe{ margin-top:var(--e-2); }
:where(body[data-css~="posso"]) .cartao:hover .cartao-ver{ text-decoration:underline; text-decoration-color:var(--madeira); text-underline-offset:4px; }
/* o bruto da faixa («1.800 a 2.500 €») desce de linha antes de sair do recibo */
:where(body[data-css~="posso"]) .recibo p:first-child{ flex-wrap:wrap; }
:where(body[data-css~="posso"]) .recibo p:first-child b{ margin-left:auto; }

/* revisão 2 (27/09): a renda apoiada fica como nota a quem ganha mais de 1.200 € */
:where(body[data-css~="posso"]) .enquanto-nota{ margin-top:var(--e-4); font-size:var(--t-apoio); color:var(--tinta-2); }

/* o cabeçalho comum transbordava 3 px a 375 px (o Menu cortado): abaixo de 390 px, o espaço entre
   os botões encolhe. Remendo desta página até o comum o fazer (PEDIDOS.md). */
/* e entre 400 e 440 px a palavra «Menu» volta e empurra o botão 10 px para fora: só o ícone (tem aria-label) até caber */
@media (max-width:439.98px){
  :where(body[data-css~="posso"]) .topo .menu-bt .menu-bt-txt{ display:none; }}
@media (max-width:389.98px){
  :where(body[data-css~="posso"]) .topo .caixa{ gap:4px; }
  :where(body[data-css~="posso"]) .topo .marca{ gap:8px; }}