/* Entre Pedras e Pedrinhas: o ciclo de vida da pedra.
   Páginas /pedir-numero, /publicar, /caderno, /recuperar, /de/147 e os módulos de /147 e /terra/slug.
   Usa só os tokens de site.css. Carregar sempre depois de site.css.

   Índice
    1. Comuns (isco, ícones, código de recuperação)    5. Página da pedra (/147)
    2. Pedir número                                    6. Terra
    3. Publicar                                        7. Caderno e recuperar
    4. Recebemos a tua pedra                           8. Corrente (/de/147)
*/

/* ───────────── 1. Comuns ───────────── */
.isco { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.icone { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ficheiro .icone { width: 32px; height: 32px; }

.codigo {
  margin-top: var(--s-6); padding: var(--s-5) var(--s-4);
  /* o código é a chave: moldura dupla, como um documento oficial (nada de barra lateral) */
  border: var(--line) solid var(--c-lit-stroke); outline: var(--line) solid var(--c-line); outline-offset: 3px;
  background: var(--c-surface); border-radius: var(--r);
}
.codigo__titulo { font-family: var(--f-ui); font-weight: 600; font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--c-text-2); }
.codigo__linha { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-4); margin-top: var(--s-3); }
.codigo__valor {
  font-family: var(--f-ui); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .08em;
  font-size: clamp(1.25rem, 1rem + 1.6vw, 1.75rem); line-height: 1.2; color: var(--c-text);
  overflow-wrap: anywhere; user-select: all; -webkit-user-select: all;
}
.codigo__valor--pequeno { font-size: 1.125rem; margin-block: var(--s-2); }
.codigo__aviso { margin-top: var(--s-3); color: var(--c-text-2); font-size: var(--fs-small); max-width: var(--measure); }
.codigo__botoes { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.codigo__botoes .botao { min-height: 44px; }
.codigo__botoes .codigo__guardar { padding-inline: 0; }
/* os botões de texto da caixa alinham pela esquerda com o título e o código (a altura vem do min-height) */
.codigo__mostrar { min-height: 36px; padding-inline: 0; }
@media (pointer: coarse) { .codigo__mostrar { min-height: 44px; } }
/* a ligação privada só aparece no papel (o bloco imprime-se sozinho, «Imprimir» no computador) */
.codigo__impresso { display: none; }
@media print {
  .codigo { outline: 0; }
  .codigo__impresso { display: block; margin-top: var(--s-3); font-family: var(--f-ui); font-size: var(--fs-small); overflow-wrap: anywhere; }
  .codigo__botoes, .codigo__mostrar { display: none; }
}

/* ───────────── 2. Pedir número ───────────── */
.pedir__form { margin-top: var(--s-5); }
.pedir__botao { font-size: 1.1875rem; min-height: 56px; }
@media (min-width: 40em) { .pedir__botao { width: auto; min-width: 280px; } }
.pedir__memoria { margin-top: var(--s-4); font-size: var(--fs-small); color: var(--c-text-2); }
.pedir__nota { margin-top: var(--s-4); color: var(--c-text-3); font-size: var(--fs-small); }
.pedir__form .campo__erro { margin-top: var(--s-3); }

.ja-tens { margin-bottom: var(--s-6); padding: var(--s-5) 0 var(--s-2); border-top: var(--line) solid var(--c-line); }
.ja-tens__titulo { font-size: var(--fs-h3); }
.ja-tens__texto { margin-top: var(--s-1); color: var(--c-text-2); }
.ja-tens__lista { margin-top: var(--s-4); border-top: var(--line) solid var(--c-line); }
.ja-tens__lista > li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-2) var(--s-4); padding: var(--s-3) 0; border-bottom: var(--line) solid var(--c-line); }
.ja-tens__n { display: flex; align-items: baseline; gap: var(--s-3); }
.ja-tens__quando { font-family: var(--f-ui); font-weight: 500; font-size: var(--fs-small); color: var(--c-text-2); }
.ja-tens__acoes { display: flex; gap: var(--s-2); }
.ja-tens__outro { margin-top: var(--s-5); color: var(--c-text-2); }

/* a coluna é a medida do número (não a janela): a partir de 600 px a coluna estreita é mais pequena que 100vw */
.revelacao { padding-top: var(--s-2); container-type: inline-size; }
.revelacao__numero { margin-top: var(--s-4); line-height: .85; }
.revelacao__numero .n-pedra__abrev { font-size: clamp(1rem, .8rem + 1vw, 1.5rem); margin-right: .25em; }
.revelacao__numero { white-space: nowrap; }
/* encolhe com o número de algarismos (--digitos, posto pelo JS): 6 algarismos a 320 px e 4 a 280 px cabem */
.revelacao__numero .n-pedra__num {
  font-size: clamp(6rem, 3rem + 18vw, 11rem);
  font-size: min(clamp(6rem, 3rem + 18vw, 11rem), calc((100vw - var(--margem-e, 16px) - var(--margem-d, 16px) - 3rem) / (var(--digitos, 3) * .62)));
  /* 3,5rem = «n.º» e a margem dele, no tamanho máximo */
  font-size: min(clamp(6rem, 3rem + 18vw, 11rem), calc((100cqi - 3.5rem) / (var(--digitos, 3) * .62)));
  line-height: .85;
}
.revelacao__titulo { margin-top: var(--s-5); font-size: var(--fs-h2); font-weight: 600; }
.revelacao__titulo:focus { outline: none; }
.revelacao__texto { margin-top: var(--s-2); color: var(--c-text-2); font-size: 1.125rem; }
.revelacao__nota { margin-top: var(--s-5); color: var(--c-text-2); }

/* o número escreve-se da esquerda para a direita, como tinta; o resto aparece depois */
.revelacao--a-entrar .revelacao__numero .n-pedra__num { display: inline-block; clip-path: inset(0 100% 0 0); }
.revelacao--a-entrar .revelacao ~ *, .revelacao--a-entrar .revelacao__titulo, .revelacao--a-entrar .revelacao__texto { opacity: 0; transform: translateY(6px); }
.revelacao--entrou .revelacao__numero .n-pedra__num { clip-path: inset(0 0 0 0); transition: clip-path 900ms var(--ease-out) 120ms; }
.revelacao--entrou .revelacao__titulo, .revelacao--entrou .revelacao__texto, .revelacao--entrou .revelacao ~ * {
  opacity: 1; transform: none; transition: opacity var(--t-panel) var(--ease-out) 900ms, transform var(--t-panel) var(--ease-out) 900ms;
}
.revelacao--entrou .revelacao__texto { transition-delay: 1000ms; }
.revelacao--entrou .revelacao ~ * { transition-delay: 1150ms; }

.escreve { margin-top: var(--s-6); container-type: inline-size; }
.escreve__titulo { font-family: var(--f-ui); font-weight: 600; font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--c-text-2); }
.escreve__endereco {
  margin-top: var(--s-3); padding: var(--s-4) var(--s-4) var(--s-3);
  border: var(--line) dashed var(--c-line-strong); border-radius: var(--r);
  /* o endereço só parte depois de «.pt/» (<wbr>), nunca a meio do número; nada fica escondido */
  font-family: var(--f-hand); font-size: clamp(1.0625rem, 5.1vw, 2.25rem); line-height: 1.2; color: var(--c-text);
  /* com letra do sistema grande (200 %) o mínimo em rem dobra: o tamanho nunca passa do que deixa
     «entrepedrasepedrinhas.pt/» inteiro numa linha da caixa (cerca de 11,4 em; 12 dá folga) */
  font-size: min(clamp(1.0625rem, 5.1vw, 2.25rem), calc((100vw - 2 * var(--gutter) - 2 * var(--s-4) - 2px) / 12));
  font-size: min(clamp(1.0625rem, 5.1vw, 2.25rem), calc((100cqi - 2 * var(--s-4) - 2px) / 12));
  overflow-wrap: normal;
}
.escreve__dominio, .escreve__numero { white-space: nowrap; }
.escreve__ajuda { margin-top: var(--s-2); color: var(--c-text-2); font-size: var(--fs-small); }
.seguintes { margin-top: var(--s-7); }
.seguintes__botoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin-top: var(--s-3); }
.seguintes__botoes .botao { white-space: nowrap; }
.seguintes__botoes .botao--texto { padding-inline: 0; white-space: normal; text-align: left; justify-content: flex-start; }
.seguintes .passos-lista { border-top: 0; }
@media (max-width: 29.99em) {
  .seguintes .passos-lista--ilustrada > li { grid-template-columns: 1.75rem minmax(0, 1fr) 48px; }
  .seguintes .passos-lista__ilustracao { width: 48px; }
}
.seguintes__acoes { margin-top: var(--s-6); }
@media (max-width: 39.99em) { .seguintes__acoes .botao--primario { width: 100%; } }

/* ───────────── 3. Publicar ───────────── */
.publicar__cabeca { margin-bottom: var(--s-5); }
/* com letra do sistema a 200 % num ecrã estreito, «Recebemos» (a palavra mais comprida do título, ~5,4 em) tem de caber */
.publicar__cabeca h1 { font-size: min(var(--fs-h1), calc((100vw - 2 * var(--gutter)) / 5.6)); }
.publicar__cabeca .anuncio-numero { margin-top: var(--s-2); color: var(--c-text-2); }
.publicar__cabeca .anuncio-numero .n-pedra__num { font-size: 2.25rem; }
.anuncio-numero__endereco { display: block; margin-top: var(--s-1); font-family: var(--f-ui); font-weight: 500; font-size: var(--fs-small); color: var(--c-text-2); }
/* com letra grande num telemóvel estreito o domínio inteiro ainda cabe numa linha (parte só depois de «.pt/») */
.anuncio-numero__endereco .endereco { font-size: min(1.125rem, 5.2vw); color: var(--c-text); }
/* Enquanto se marca o sítio no mapa, a barra "É aqui / Cancelar" do mapa é a única: a "Voltar / Seguinte" sai.
   A classe vem do JS (Firefox 115 sem :has()); o :has() fica como reserva. */
.publicar--a-escolher .barra-fixa { display: none; }
/* «Publicar a pedra n.º 148» com letra grande: o botão parte em duas linhas em vez de sair do ecrã */
.publicar .barra-fixa .botao { max-width: 100%; }
/* sem largura para uma linha, parte antes do número, que fica centrado na linha de baixo; com letra enorme, cada bloco ainda parte por dentro */
.publicar__texto-botao { text-align: center; }
.publicar__texto-botao > span:first-child, .publicar__texto-botao > .n-pedra { display: inline-block; max-width: 100%; }
@media (max-width: 19em) { .publicar__a-pedra { display: none; } }
/* o n.º da pedra dentro do botão amarelo herda a cor do botão (o creme e o cinzento do .n-pedra não se leem no amarelo) */
.publicar .barra-fixa .botao .n-pedra__num, .publicar .barra-fixa .botao .n-pedra__abrev { color: inherit; }
.publicar .barra-fixa .botao .n-pedra__abrev { opacity: .75; }
.publicar:has(.mapa--escolher) .barra-fixa { display: none; }
.publicar__sem-numero .acoes { flex-direction: column; align-items: stretch; max-width: 26rem; }
/* ecrãs antes do formulário: no telemóvel os botões empilham-se a toda a largura */
@media (max-width: 39.99em) {
  .publicar__estado .acoes { flex-direction: column; align-items: stretch; }
  .publicar__estado .acoes .botao, .publicar__sem-numero .acoes .botao { width: 100%; }
}
/* Telemóvel deitado: a cabeça encolhe para o passo (e os botões dele) caberem no primeiro ecrã */
@media (min-width: 30em) and (max-height: 35em) and (orientation: landscape) {
  .publicar__cabeca { margin-bottom: var(--s-4); }
  .publicar__cabeca .etiqueta { display: none; }
  .publicar__cabeca h1 { font-size: var(--fs-h2); }
  .pagina-publicar { padding-top: var(--s-3); }
  .publicar__cabeca p.anuncio-numero { margin-top: var(--s-1); max-width: none; font-size: 1rem; }
  .publicar__cabeca .anuncio-numero .n-pedra__num { font-size: 1.375rem; }
  .publicar__cabeca .anuncio-numero__endereco { display: inline; margin: 0 0 0 .5em; }
  .publicar__cabeca .anuncio-numero__endereco .endereco { font-size: 1rem; }
  .publicar .passo__texto { font-size: 1rem; max-width: none; }
  .publicar .passos { margin-bottom: var(--s-4); }
  /* câmara e galeria lado a lado: cabem as duas no primeiro ecrã */
  .publicar .seletor-foto--toque { grid-template-columns: 1fr 1fr; }
  .publicar .seletor-foto--toque .campo__ajuda { grid-column: 1 / -1; }
  /* a fotografia escolhida ao lado do texto: «Seguinte» fica no mesmo ecrã */
  .publicar .foto-escolhida { grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: var(--s-4); }
  .publicar .foto-escolhida .pre-visualizacao img { max-height: 52svh; width: auto; max-width: 100%; }
  .publicar .foto-escolhida__info { flex-direction: column; align-items: flex-start; }
}
/* No telemóvel, sem fotografia, a barra só teria um «Seguinte» apagado por cima de «Tirar a fotografia»: sai.
   Volta quando há fotografia (ou enquanto se prepara). */
@media (max-width: 39.99em) { .publicar .barra-fixa--espera { display: none; } }
/* Telemóvel em pé com pouca altura (320×568, 280×653, 360×640): o resto da cabeça encolhe
   para «Tirar a fotografia» e «Escolher da galeria» caberem no primeiro ecrã. A etiqueta e o título ficam
   como em /pedir-numero e nas outras páginas: a página começa à mesma altura e com o mesmo tamanho. */
@media (max-width: 39.99em) and (max-height: 42em) and (orientation: portrait) {
  .publicar__cabeca { margin-bottom: var(--s-4); }
  .publicar__cabeca p.anuncio-numero { margin-top: var(--s-1); font-size: 1.0625rem; }
  .publicar__cabeca .anuncio-numero .n-pedra__num { font-size: 1.625rem; }
  .publicar .passos { margin-bottom: var(--s-4); }
  .publicar .passo__texto { font-size: 1rem; }
}
@media (pointer: coarse) { .foto-escolhida__trocar { min-height: 44px; } }
.publicar__perdida { margin-bottom: var(--s-5); }
/* Cada passo entra a deslizar um pouco, como uma folha de caderno virada */
.passo { animation: entrar var(--t-panel) var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .passo { animation: none; } }
.publicar__estado .acoes { margin-top: var(--s-3); }
.publicar .codigo { margin-top: 0; margin-bottom: var(--s-6); }
.publicar > .mensagem { margin-bottom: var(--s-5); }
.passo .passo__titulo:focus { outline: none; }
.passo__regras { margin-top: var(--s-4); color: var(--c-text-3); font-size: var(--fs-small); max-width: var(--measure); }
.passo .campo__erro:not([hidden]) { margin-top: var(--s-3); }
.publicar .escolha .n-pedra { margin-right: var(--s-2); }

.ficheiro { min-height: 240px; }
.ficheiro--a-preparar { cursor: progress; border-style: solid; }
.foto-escolhida { display: grid; gap: var(--s-3); }
.foto-escolhida .pre-visualizacao img { max-height: 56svh; }
.foto-escolhida__info { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-3); font-family: var(--f-ui); font-weight: 500; }
.foto-escolhida__trocar { position: relative; overflow: hidden; }
.seletor-foto__colar { font-family: var(--f-ui); font-size: var(--fs-small); color: var(--c-text-3); }
.foto-escolhida.ficheiro--sobre .pre-visualizacao { outline: var(--line-2) dashed var(--c-light); outline-offset: 4px; }
.foto-escolhida__trocar input, .ficheiro-botao input, .extras__juntar input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.ficheiro-botao { position: relative; overflow: hidden; }

/* O mapa para marcar o sítio. No telemóvel encosta às margens e deixa ver o que vem por baixo (um dedo faz scroll
   da página, dois mexem no mapa); o alfinete abre em ecrã inteiro. Deitado, ocupa o ecrã que sobra do cabeçalho. */
.publicar__mapa {
  position: relative; height: min(56vh, 480px); height: min(56svh, 480px); min-height: 300px;
  margin-inline: calc(-1 * var(--margem-e, var(--gutter))) calc(-1 * var(--margem-d, var(--gutter)));
  border-block: var(--line) solid var(--c-line); background: var(--c-bg);
}
@media (min-width: 40em) { .publicar__mapa { height: min(60vh, 520px); height: min(60svh, 520px); margin-inline: 0; border: var(--line) solid var(--c-line); } }
@media (min-width: 60em) { .publicar__mapa { height: 560px; } }
@media (min-width: 30em) and (max-height: 35em) and (orientation: landscape) {
  .publicar__mapa { height: calc(100vh - var(--header-h) - 24px); height: calc(100svh - var(--header-h) - 24px); min-height: 220px; }
}
.onde__pesquisa { margin-bottom: var(--s-4); max-width: 26rem; }
.onde__pesquisa .pesquisa__lista { z-index: 40; }
.publicar__mapa-dentro { position: absolute; inset: 0; }
/* Sem sítio de partida o alfinete ainda não marca nada: fica esbatido até ao primeiro toque (mapa.mjs, porMarcar) */
.publicar .mapa__alfinete--por-marcar svg { opacity: .45; }
.onde__estado { margin-top: var(--s-4); display: grid; gap: var(--s-2); min-height: 6em; }
.onde__frase { font-size: 1.125rem; }
.onde__opcoes { display: grid; gap: var(--s-3); margin-top: var(--s-2); }
@media (min-width: 40em) { .onde__opcoes { grid-template-columns: 1fr 1fr; } }
.onde__opcoes .botao { justify-content: flex-start; min-height: 56px; }
.onde__concelho { font-size: 1.25rem; }
.onde__concelho strong { font-weight: 600; }
.onde__acende { display: flex; align-items: baseline; gap: var(--s-2); font-family: var(--f-ui); font-weight: 500; }
.onde__acende .marca-estado { position: relative; top: -1px; }
.onde__nota, .onde__origem { color: var(--c-text-2); font-size: var(--fs-small); }
.onde__mudar { margin-top: var(--s-1); }

.mais-lista { border-top: var(--line) solid var(--c-line); }
.mais { border-bottom: var(--line) solid var(--c-line); }
.mais__resumo {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  min-height: 56px; cursor: pointer; list-style: none;
  font-family: var(--f-ui); font-weight: 600; font-size: 1.0625rem; color: var(--c-text);
}
.mais__resumo::-webkit-details-marker { display: none; }
.mais__resumo::after { content: "+"; font-weight: 500; font-size: 1.375rem; color: var(--c-text-2); width: 1em; text-align: center; }
.mais[open] > .mais__resumo::after { content: "−"; }
@media (hover: hover) { .mais__resumo:hover { color: var(--c-light); } }
.mais__corpo { padding: 0 0 var(--s-5); }
.mais__corpo .campo__rotulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mais__corpo .campo { gap: var(--s-2); }
.mais__desafio { margin-top: var(--s-5); }

.extras__lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--s-1); }
.extras__item { position: relative; aspect-ratio: 1; background: var(--c-surface); }
.extras__item img { width: 100%; height: 100%; object-fit: cover; }
.extras__item--a-preparar { display: grid; place-items: center; font-family: var(--f-ui); font-size: var(--fs-small); color: var(--c-text-2); }
.extras__tirar {
  position: absolute; right: 0; bottom: 0; min-height: 32px; padding: 0 var(--s-2);
  background: var(--c-bg); color: var(--c-text); border: var(--line) solid var(--c-line-strong); border-radius: 0;
  font-family: var(--f-ui); font-weight: 600; font-size: var(--fs-small);
}
.extras__item--juntar { border: var(--line) dashed var(--c-line-strong); background: transparent; }
.extras__juntar { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; cursor: pointer; font-family: var(--f-ui); font-weight: 600; color: var(--c-text-2); }
.extras__juntar span[aria-hidden] { font-size: 1.75rem; line-height: 1; font-weight: 500; }
.extras__item--juntar:focus-within, .extras__item--juntar.ficheiro--sobre { border-color: var(--c-light); }
.extras__item--juntar.ficheiro--sobre .extras__juntar { color: var(--c-text); }
@media (hover: hover) {
  .extras__item--juntar:hover { border-color: var(--c-light); }
  .extras__item--juntar:hover .extras__juntar { color: var(--c-text); }
}
.extras .campo__ajuda { margin-top: var(--s-2); }

.resumo { display: grid; gap: var(--s-4); }
@media (min-width: 40em) {
  .resumo { grid-template-columns: 160px minmax(0, 1fr); align-items: start; }
}
.resumo__foto { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--c-deep); }
@media (max-width: 39.99em) { .resumo__foto { max-height: 40vh; max-height: 40svh; } }
.resumo__dados { grid-template-columns: 1fr; }
.resumo__dados > div:nth-child(even) { padding-left: 0; border-left: 0; }
.resumo__dados > div { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: var(--s-3); align-items: baseline; }
.resumo__dados dd { margin-top: 0; min-width: 0; overflow-wrap: break-word; }
.endereco--partido > span { white-space: nowrap; }
/* no resumo o endereço é medido pela coluna do valor: encolhe até caber inteiro numa linha (em Itim ocupa ~13,5 em).
   Em bloco, para a linha de base ser a da primeira linha: a etiqueta fica alinhada com ela mesmo se partir */
.resumo__dados .resumo__endereco { container-type: inline-size; }
.resumo__dados .endereco--partido { display: block; max-width: 100%; line-height: 1.3; font-size: min(1.04em, calc(100cqi / 13.9)); }
/* estreitíssimo: a etiqueta por cima do valor, para o valor ter a largura toda */
@media (max-width: 24.99em) { .resumo__dados > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
@media (min-width: 40em) { .resumo__dados > div { grid-template-columns: 7.5em minmax(0, 1fr); } }

.envio { margin-top: var(--s-5); }
.envio__barra { height: var(--line-2); background: var(--c-line); position: relative; overflow: hidden; }
.envio__barra > span { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--c-light); transition: width var(--t-ui) linear; }
.envio__texto { margin-top: var(--s-2); font-family: var(--f-ui); font-weight: 500; font-variant-numeric: tabular-nums; color: var(--c-text-2); }
.envio__nota { margin-top: var(--s-1); font-size: var(--fs-small); color: var(--c-text-2); }
.passo > .mensagem--erro:not([hidden]) { margin-top: var(--s-4); }

/* ───────────── 4. Recebemos a tua pedra ───────────── */
.feito__texto { font-size: 1.1875rem; color: var(--c-text-2); margin-bottom: var(--s-5); max-width: var(--measure); }
.feito__texto:focus { outline: none; }
.feito .publicar__mapa { height: min(50vh, 440px); height: min(50svh, 440px); }
@media (min-width: 30em) and (max-height: 35em) and (orientation: landscape) {
  .feito .publicar__mapa { height: calc(100vh - var(--header-h) - 64px); height: calc(100svh - var(--header-h) - 64px); }
}
@media (max-width: 39.99em) { .feito__acoes { flex-direction: column; align-items: stretch; } }
.feito__onde { margin-top: var(--s-4); font-size: 1.125rem; }
.feito .codigo { margin-top: var(--s-6); margin-bottom: 0; }
.feito__ligacoes {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) 0;
  margin-top: var(--s-6); padding-top: var(--s-4); border-top: var(--line) solid var(--c-line);
  font-family: var(--f-ui); font-weight: 500; color: var(--c-text-3);
}
.feito__ligacoes a { white-space: nowrap; }
/* com rato: uma linha, separada por pontos */
.feito__ligacoes li + li::before { content: "·"; margin-inline: .6em; color: var(--c-text-3); }
/* no toque é navegação, não uma frase: uma ligação por linha, cada uma com 44 px para o dedo */
@media (pointer: coarse) {
  .feito__ligacoes { flex-direction: column; align-items: flex-start; gap: 0; padding-top: var(--s-2); }
  .feito__ligacoes li + li::before { content: none; }
  .feito__ligacoes a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ───────────── 5. Página da pedra (/147) ─────────────
   Disposição por aparelho: docs/dispositivos.md §3.3. A grelha (fotografia + texto) e os metadados estão em site.css §17. */
.pedra__ampliar { display: block; width: 100%; height: 100%; padding: 0; margin: 0; border: 0; background: none; color: inherit; cursor: zoom-in; }
.pedra__ampliar:focus-visible { outline-offset: -4px; }
.pedra__aniversario-botao { height: auto; }

/* Duas colunas: a fotografia nunca leva faixas escuras. Se por acaso for mais alta do que o ecrã, corta-se ao centro. */
@media (min-width: 60em), (min-width: 30em) and (max-height: 35em) and (orientation: landscape) {
  .pedra__foto img, .pedra__foto img[width][height] { object-fit: cover; object-position: 50% 50%; }
  /* Fotografia ao alto (pedra--foto-alta, posta pelo servidor): a coluna estreita-se à proporção da fotografia,
     que fica inteira e com a altura do ecrã; o texto ganha a largura que sobra. */
  .pedra.pedra--foto-alta { grid-template-columns: auto minmax(360px, 1fr); }
  .pedra--foto-alta .pedra__foto img, .pedra--foto-alta .pedra__foto img[width][height] {
    width: auto; height: calc(100vh - var(--header-h)); height: calc(100svh - var(--header-h));
    max-width: min(60vw, calc(100vw - 360px));
  }
}
@media (min-width: 30em) and (max-height: 35em) and (orientation: landscape) {
  .pedra.pedra--foto-alta { grid-template-columns: auto minmax(0, 1fr); }
  .pedra--foto-alta .pedra__foto img, .pedra--foto-alta .pedra__foto img[width][height] { height: 100vh; height: 100svh; max-width: 50vw; }
}
/* Fotografia deitada nas duas colunas: a coluna da fotografia mede-se pela proporção dela (--proporcao, degrau posto pelo
   servidor), para a fotografia chegar à altura do ecrã sem deixar um vazio por baixo. O texto fica com 36 % da
   largura, pelo menos. Quando a largura não chega, a fotografia pode cortar até ~6 % de cada lado (a pedra está muitas vezes perto da borda) e fica ao centro
   da coluna presa, com margens iguais em cima e em baixo. Nunca --r: esse é o raio dos cantos do site (site.css). */
.pedra--r125 { --proporcao: 1.25; } .pedra--r133 { --proporcao: 1.3333; } .pedra--r150 { --proporcao: 1.5; } .pedra--r178 { --proporcao: 1.7778; } .pedra--r200 { --proporcao: 2; }
@media (min-width: 60em), (min-width: 30em) and (max-height: 35em) and (orientation: landscape) {
  .pedra.pedra--foto-deitada {
    --foto-h: calc(100vh - var(--header-h)); --foto-h: calc(100svh - var(--header-h));
    --texto-min: max(360px, 36vw);
    --foto-l: min(calc(var(--foto-h) * var(--proporcao, 1.5)), calc(100vw - var(--texto-min)));
    grid-template-columns: var(--foto-l) minmax(0, 1fr);
  }
  .pedra--foto-deitada .pedra__foto { height: var(--foto-h); max-height: none; display: flex; flex-direction: column; justify-content: center; background: none; }
  .pedra--foto-deitada .pedra__ampliar { height: auto; }
  .pedra--foto-deitada .pedra__foto img, .pedra--foto-deitada .pedra__foto img[width][height] {
    width: 100%; height: min(var(--foto-h), calc(var(--foto-l) / var(--proporcao, 1.5) * 1.15)); max-height: none;
    object-fit: cover; background: var(--c-deep);
  }
}
@media (min-width: 30em) and (max-height: 35em) and (orientation: landscape) {
  .pedra.pedra--foto-deitada { --foto-h: 100vh; --foto-h: 100svh; --texto-min: 45vw; }
}
/* Ecrãs enormes: a coluna de texto fica nos 40rem de site.css (docs/dispositivos.md §1.1, L5; P28) */

/* Uma palavra comprida sem espaços (até 30 letras, «Extraordinariamente») parte na linha em vez de alargar a
   coluna e criar scroll de lado: os filhos da grelha podem encolher abaixo da largura da palavra. */
.pedra__texto, .pedra__texto > * { min-width: 0; }
.pedra__palavra { overflow-wrap: anywhere; hyphens: auto; }
/* Palavras compridas (degrau --lN posto pelo servidor: N letras seguidas, no máximo): a letra encolhe até a palavra
   caber numa linha da cabeça (Itim tem ~0,47 em por letra), sem descer abaixo de 1rem. O overflow-wrap fica
   como rede, para navegadores sem unidades de contentor. */
.pedra__cabeca { container-type: inline-size; }
.pedra__palavra[class*="pedra__palavra--l"] { font-size: max(1rem, min(clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem), calc(100cqi / (var(--letras) * .5)))); }
.pedra__palavra--l12 { --letras: 12; } .pedra__palavra--l15 { --letras: 15; } .pedra__palavra--l18 { --letras: 18; }
.pedra__palavra--l21 { --letras: 21; } .pedra__palavra--l24 { --letras: 24; } .pedra__palavra--l27 { --letras: 27; }
.pedra__palavra--l30 { --letras: 30; }
/* O «O que é isto?» fica ao mesmo espaço das outras secções (o gap da grelha), sem a margem de cima da nota */
.pedra__texto > .nota-campo { margin-top: 0; }

/* Galeria com 3 fotografias extra: três colunas também no telemóvel, para não ficar uma sozinha por baixo */
.pedra__galeria .galeria--tres { grid-template-columns: repeat(3, 1fr); }

/* Metadados em L0 (abaixo de 360 px, e com zoom grande): uma coluna, para as datas e os nomes não partirem
   palavra a palavra em colunas de 120 px */
@media (max-width: 22.49em) {
  .metadados { grid-template-columns: minmax(0, 1fr); }
  .metadados > div:nth-child(even) { padding-left: 0; border-left: 0; }
  .metadados dd { overflow-wrap: break-word; }
}
/* Número ímpar de metadados (ex.: 7, com as coordenadas no fim): o último ocupa as duas colunas, para a metade
   direita não ficar vazia e a linha de fecho ir de ponta a ponta */
.metadados > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* Verbo e pronome («vê-a», «dá-lo-ei») não se separam no hífen: o pronome sozinho no início da linha lê-se mal */
.pedra__descricao .sem-quebra { white-space: nowrap; }
/* O endereço da pedra (estado inexistente) parte depois de «.pt/»; só com letra enorme parte onde for preciso */
.pagina-estado .endereco { overflow-wrap: anywhere; }

/* Minimapa parado: um dedo por cima faz scroll da página. «Abrir no mapa» leva à página inicial com a pedra. */
.minimapa__mapa { position: absolute; inset: 0; }
.minimapa__ligacao {
  position: absolute; right: 0; bottom: 0; z-index: 3; display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--s-3);
  background: var(--c-bg); border-top: var(--line) solid var(--c-line); border-left: var(--line) solid var(--c-line);
  font-family: var(--f-ui); font-weight: 600; font-size: var(--fs-small);
}

/* Coordenadas: os números e, por baixo, «Abrir no Google Maps» (no telemóvel abre a app, se houver) */
.meta__coords { white-space: nowrap; }
.meta__abrir { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-3); margin-top: 2px; font-family: var(--f-ui); font-weight: 600; font-size: var(--fs-small); overflow-wrap: normal; }
.metadados .meta__abrir a { color: var(--c-moss); text-decoration-color: currentColor; }
@media (pointer: coarse) {
  /* ligações em linha: a área de toque cresce com padding vertical, sem mexer no desenho */
  .meta__coords, .metadados dd > a { padding-block: 12px; }
  .pedra__cabeca .etiqueta a { padding-block: 15px; }
  .meta__abrir a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Encontraste esta pedra? */
.pedra__acoes { align-items: center; }
@media (max-width: 39.99em) { .pedra__acoes > .botao--primario { flex: 1 1 100%; } }
/* Telemóveis baixos em pé (SE): a fotografia encolhe para o «n.º» não ficar por baixo da barra do polegar */
@media (max-width: 39.99em) and (max-height: 40em) and (orientation: portrait) {
  .pedra__foto, .pedra__foto img[width][height] { max-height: min(125vw, 54svh); }
}
.encontro { width: 100%; display: grid; gap: var(--s-3); }
.encontro__pergunta { font-family: var(--f-ui); font-weight: 600; font-size: 1.125rem; }
.encontro__pergunta:focus, .encontro--feito:focus { outline: none; }
.encontro .escolhas { margin-top: 0; }
.escolha--botao { width: 100%; min-height: 56px; background: none; border: 0; border-bottom: var(--line) solid var(--c-line); color: var(--c-text); text-align: left; padding-inline: 0; }
.escolha--botao[aria-busy="true"] { color: var(--c-text-2); cursor: progress; }
.escolha--botao::before { content: ""; flex: none; width: 20px; height: 20px; border: var(--line) solid var(--c-line-strong); border-radius: 50%; }
.escolha--botao:active:not(:disabled)::before { border-color: var(--c-light); }
.escolha--botao:disabled { opacity: .6; cursor: default; }
@media (hover: hover) {
  .escolha--botao:hover:not(:disabled) { color: var(--c-light); }
  .escolha--botao:hover:not(:disabled)::before { border-color: var(--c-light); }
}
.encontro .botao--texto { justify-self: start; padding-left: 0; }
.encontro--feito { padding: var(--s-4); border: var(--line) solid var(--c-moss); background: var(--c-surface); }
.encontro__frase { font-size: 1.125rem; }
.encontro__frase strong { color: var(--c-moss); }
.historico__item--novo time { color: var(--c-moss); }
.pedra__acoes > .botao--texto { padding-inline: 0; }
.pedra__partilhar { margin-top: var(--s-2); }
.pedra__partilhar-botao { padding-left: 0; }
.pedra__partilhar-botao:disabled { visibility: hidden; }

/* Barra do polegar «Encontrei-a»: só no telemóvel em pé e só enquanto a secção está abaixo do ecrã (pedra.mjs).
   É fixa e não empurra nada (sem CLS). A altura vai para --barra-baixo e os avisos ficam por cima dela. */
.pedra__barra { display: none; }
@media (max-width: 39.99em) and (min-height: 35em) {
  .pedra__barra:not([hidden]) {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    padding: var(--s-3) var(--margem-d) calc(var(--s-3) + var(--sa-b)) var(--margem-e);
    background: var(--c-bg); border-top: var(--line) solid var(--c-line);
  }
  .pedra__barra .botao { flex: 1; }
  html.teclado-aberto .pedra__barra, html.menu-aberto .pedra__barra, html.vista-aberta .pedra__barra { display: none; }
}
@media print { .pedra__barra { display: none !important; } }
/* O fim da página nunca fica por baixo da barra (a altura dela vem em --barra-baixo, aparelho.mjs) */
/* Só na pedra publicada (a única com barra): nos outros estados .pagina-estado (site.css) já dá --s-9 em baixo
   e esta regra, mais forte, deixava a última caixa encostada ao rodapé. */
main.pagina-pedra-corpo { padding-bottom: var(--barra-baixo, 0px); }
/* Impressão (§2.17): a fotografia sai (o botão que a abre em grande leva .imprime), com 12 cm no máximo; o minimapa
   não se desenha no PDF e sai do papel, as coordenadas e a terra já estão nos metadados. */
@media print {
  .pedra__ampliar { cursor: auto; height: auto; }
  .pedra__mapa { display: none !important; }
  .pedra--foto-deitada .pedra__foto, .pedra--foto-alta .pedra__foto { height: auto !important; display: block !important; }
  .pedra__foto img, .pedra__foto img[width][height] { height: auto !important; margin-inline: auto; }
  /* no papel, as fotografias extra em miniaturas (quatro por linha) e o «um ano depois» a meia largura */
  .pedra__galeria .galeria, .pedra__galeria .galeria--tres, .pedra__galeria .galeria--pares { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .pedra__aniversario .galeria { max-width: 60%; }
}

/* «Leste outro número?» (pedra inexistente): o número escreve-se na letra da pedra */
.outro-numero { margin-top: var(--s-6); display: grid; gap: var(--s-2); max-width: 22rem; }
.outro-numero__rotulo { font-family: var(--f-ui); font-weight: 600; font-size: 1.0625rem; color: var(--c-text); }
.outro-numero__linha { display: flex; gap: var(--s-2); }
/* O campo do número é o mesmo de /molde, /convite e /passeios (.entrada.entrada--escrita: Itim 22 px, «147»);
   o botão ao lado estica até à altura dele, como lá */
.outro-numero__campo { flex: 1; min-width: 0; font-weight: 400; }
.outro-numero .botao { flex: none; min-width: 6rem; }
/* 404: «Ir para o mapa» e «Procurar uma terra» empilhados no telemóvel (docs/dispositivos.md §3.18) */
@media (max-width: 39.99em) {
  main[data-pagina="404"] .acoes { flex-direction: column; align-items: stretch; max-width: 22rem; }
}

.corrente__de, .corrente__total { font-size: 1.125rem; }
.corrente__total { margin-top: var(--s-2); }
.corrente__arvore { margin-top: var(--s-4); }
.corrente__lista { position: relative; padding-left: var(--s-5); margin-top: var(--s-1); }
.corrente__lista::before { content: ""; position: absolute; left: 6px; top: 0; bottom: 14px; width: var(--line); background: var(--c-line-strong); }
.corrente__lista > li { position: relative; padding: var(--s-1) 0; }
.corrente__lista > li::before { content: ""; position: absolute; left: calc(-1 * var(--s-5) + 6px); top: 1.05em; width: 12px; height: var(--line); background: var(--c-line-strong); }
.corrente__lista a { color: var(--c-text); text-decoration-color: var(--c-line-strong); }
@media (pointer: coarse) { .corrente__lista a { display: inline-block; padding-block: 10px; } }
.corrente__sitio { margin-left: var(--s-2); font-family: var(--f-ui); font-weight: 500; font-size: var(--fs-small); color: var(--c-text-2); }

.pedra__dono:not([hidden]) { padding: var(--s-5) var(--s-4); border: var(--line) solid var(--c-lit-stroke); background: var(--c-surface); }
.pedra__dono .titulo-secao { margin-bottom: var(--s-3); }
.dono__estado { font-family: var(--f-ui); font-weight: 500; color: var(--c-text-2); }
.dono__vista { margin-top: var(--s-2); font-size: 1.125rem; }
.dono__vista--novos { color: var(--c-text); }
.dono__aniversario { margin-top: var(--s-4); padding-top: var(--s-4); border-top: var(--line) solid var(--c-line); display: grid; gap: var(--s-3); }
.dono__aniversario-feito { margin-top: var(--s-3); color: var(--c-text-2); }
.dono__seletor.ficheiro { min-height: 160px; }
.dono__ligacoes { margin-top: var(--s-4); font-family: var(--f-ui); font-weight: 500; color: var(--c-text-3); }
@media (pointer: coarse) { .dono__ligacoes a { display: inline-block; padding-block: 10px; } }
@media (max-width: 29.99em) { .pedra__dono .acoes .botao, .dono-a-caminho .acoes .botao { flex: 1 1 100%; } }
.retirar { margin-top: var(--s-5); padding-top: var(--s-3); border-top: var(--line) solid var(--c-line); }
.retirar__abrir, .esquecer__abrir { color: var(--c-text-2); padding-left: 0; text-decoration-color: var(--c-line-strong); }
@media (hover: hover) { .retirar__abrir:hover, .esquecer__abrir:hover { color: var(--c-error); } }
.retirar__confirmar, .esquecer__confirmar { padding: var(--s-4); border: var(--line) solid var(--c-error); border-radius: var(--r); }
.retirar__texto:focus, .esquecer__texto:focus { outline: none; }
.dono-a-caminho { margin-top: var(--s-6); padding: var(--s-5) var(--s-4); border: var(--line) solid var(--c-lit-stroke); background: var(--c-surface); }
.dono-a-caminho .titulo-secao { margin-bottom: var(--s-3); }

/* ───────────── 6. Terra ───────────── */
.recorte__pedra--ligacao { cursor: pointer; }
.recorte__pedra--ligacao:focus { outline: none; }
.recorte__pedra--realce, .recorte__pedra--ligacao:focus-visible { stroke: var(--c-text); stroke-width: 2; vector-effect: non-scaling-stroke; }
.item-pedra--realce { background: var(--c-surface); }
.terra__nota-numero { margin-top: var(--s-2); color: var(--c-text-2); font-size: var(--fs-small); }
/* Alvo invisível de cada ponto (o raio, de pelo menos 12 px de ecrã, é posto por terra.mjs) */
.recorte__alvo { fill: transparent; stroke: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }

/* Com a letra do sistema a 200 %, o nome sobe a 80 px e «Portalegre» já não cabe num telemóvel.
   Os filhos da grelha podem encolher abaixo do conteúdo (sem isto a coluna alargava e arrastava a página
   para o lado), e o nome nunca passa de 15vw: à letra normal nada muda, porque o clamp fica abaixo disso. */
.terra__grelha > * { min-width: 0; }
.terra__nome { font-size: min(clamp(2.5rem, 1.6rem + 4.5vw, 4.5rem), 15vw); overflow-wrap: anywhere; }
/* Todos os blocos da coluna do texto acabam na mesma linha à direita (antes: 420, 558 e 596 px) */
.terra__grelha .terra__progresso, .terra__grelha .vazio { max-width: none; }
/* O sítio de cada pedra leva até duas linhas: numa só, na coluna estreita, perdia-se quase todo o nome */
.terra .item-pedra__sitio { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow-wrap: anywhere; }
/* A caixa do vazio só põe a ilustração ao lado do texto quando há largura para isso (~26rem); na coluna
   estreita do telemóvel deitado fica por cima, como em pé, e o texto não se parte palavra a palavra */
.terra__pedras { container-type: inline-size; }
.terra__pedras .vazio--ilustrado { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
@container (min-width: 26rem) {
  .terra__pedras .vazio--ilustrado { grid-template-columns: 128px minmax(0, 1fr); gap: var(--s-5); }
}

/* Telemóvel em pé (base): o recorte não passa de metade do ecrã, para a lista de pedras aparecer logo */
/* Quando a altura manda (concelhos altos), o recorte encolhe na largura: fica ao centro da coluna, com a
   legenda e «Ver no mapa» por baixo dele, e não encostado à esquerda com um vazio à direita. A moldura
   fica justa ao desenho (os vizinhos vêm cortados pelo quadro e não podem encher os lados). */
.terra__recorte .recorte { display: block; width: auto; margin-inline: auto; max-height: 50vh; max-height: 50svh; }
.terra__recorte figcaption, .terra__ver-mapa { text-align: center; }
.terra__ver-mapa { margin-top: var(--s-1); }
.terra__partilhar { margin: 0; }
/* «Ser o primeiro de sempre aqui»: a toda a largura no telemóvel, ao alcance do polegar */
.terra__primeiro { margin-top: var(--s-5); }
@media (max-width: 39.99em) {
  .terra__primeiro .botao { width: 100%; white-space: normal; text-align: center; }
}

/* Toque: a ligação da freguesia ocupa a linha toda (44 px), e as ligações em linha da cabeça e do RSS
   ganham altura com padding vertical, sem mexer no desenho */
@media (pointer: coarse) {
  .terra__freguesias .lista-freguesias__item a { display: flex; align-items: center; align-self: stretch; flex: 1 1 auto; min-width: 0; min-height: 44px; }
  .terra__cabeca .etiqueta a { padding-block: 15px; }
  .terra__rss a { display: inline-block; padding-block: 9px; justify-self: start; }
  /* «primeira: n.º 2» e «a última foi a n.º 500»: ligações em linha; o padding alarga o alvo sem mexer na linha */
  .terra__resumo a, .terra__completo-texto a { padding-block: 10px; }
  /* e chega aos 44 px de largura: padding dos lados, anulado por margem negativa (o texto não mexe) */
  .terra__resumo a, .terra__completo-texto a { padding-inline: 8px; margin-inline: -8px; }
  .terra__completo-texto a { padding-block: 12px; }
}

/* Sem linhas duplas: nas pedras e nas freguesias, o filete é o da lista (ou do resumo) logo abaixo,
   não o do título; e o RSS não repete a linha com que a lista anterior já fecha */
.terra__pedras > .titulo-secao, .terra__freguesias > .titulo-secao { border-bottom: 0; padding-bottom: 0; }
.terra__freguesias > .titulo-secao { margin-bottom: 0; }
.terra__freguesias > .titulo-secao + * { margin-top: 0; }
/* Os vizinhos às escuras leem-se como as freguesias às escuras logo acima: o mesmo corpo e a mesma cor */
.terra__vizinhos .lista-terras a { font-size: 1rem; color: var(--c-text-2); }
@media (hover: hover) { .terra__vizinhos .lista-terras a:hover { color: var(--c-text); } }
.terra__vizinhos + .terra__rss, .terra--acesa .terra__pedras + .terra__rss, .terra__freguesias + .terra__rss { border-top: 0; }
.terra__freguesias:has(> .terra__escuras-todas:last-child:not([open])) + .terra__rss { border-top: var(--line) solid var(--c-line); }

/* Freguesias às escuras quando são muitas: fechadas, com o número à vista */
.terra__escuras-todas { margin-top: var(--s-3); }
/* Depois das acesas, o resumo é mais uma linha da lista: usa o filete com que ela fecha, sem um segundo */
.lista-freguesias--acesas + .terra__escuras-todas { margin-top: calc(-1 * var(--s-3)); }
.lista-freguesias--acesas + .terra__escuras-todas > .terra__escuras-resumo { border-top: 0; }
.terra__escuras-resumo {
  display: flex; align-items: center; gap: var(--s-2); min-height: 44px; margin: 0; cursor: pointer;
  list-style: none; border-top: var(--line) solid var(--c-line);
}
.terra__escuras-resumo::-webkit-details-marker { display: none; }
.terra__escuras-n { font-variant-numeric: tabular-nums; color: var(--c-text-3); }
.terra__escuras-abrir { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--c-moss); letter-spacing: 0; text-transform: none; font-size: var(--fs-small); }
.terra__escuras-abrir::before { content: "Ver todas"; }
.terra__escuras-abrir::after {
  content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform var(--t-ui) var(--ease-out);
}
.terra__escuras-todas[open] .terra__escuras-abrir::before { content: "Esconder"; }
.terra__escuras-todas[open] .terra__escuras-abrir::after { transform: translateY(2px) rotate(-135deg); }
@media (hover: hover) { .terra__escuras-resumo:hover .terra__escuras-abrir { text-decoration: underline; } }
@media print {
  .terra__escuras-abrir, .terra__ver-mapa, .terra__partilhar { display: none !important; }
  .recorte__pedra { fill: var(--c-light); }
  /* A bolinha de «Acesa» é um fundo, que o navegador não imprime: no papel desenha-se a preto */
  .terra .marca-estado--acesa { background: #000; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Duas colunas (computador e telemóvel deitado): o recorte fica preso à direita a página toda, não só
   nas três primeiras linhas da grelha. As linhas implícitas a mais não têm altura nem espaço entre si. */
@media (min-width: 60em), (min-width: 30em) and (max-height: 35em) and (orientation: landscape) {
  .terra__grelha { row-gap: 0; }
  .terra__grelha > :not(.terra__recorte) { grid-column: 1; }
  .terra__grelha > :not(.terra__recorte):not(:first-child) { margin-top: var(--s-7); }
  .terra__grelha > .terra__partilhar:not(:first-child):not(.terra__recorte) { margin-top: var(--s-4); }
  .terra__recorte { grid-row: 1 / span 12; }
  .terra__recorte .recorte { max-height: calc(100vh - var(--header-h) - 7rem); max-height: calc(100svh - var(--header-h) - 7rem); }
}
@media (min-width: 30em) and (max-height: 35em) and (orientation: landscape) {
  .terra__recorte .recorte { max-height: calc(100svh - var(--s-7) - 3.5rem); }
  /* Janela baixa: o recorte fica limitado pela altura e sobrava espaço à direita; o texto ganha largura */
  .terra__grelha { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}

/* ───────────── 7. Caderno e recuperar ───────────── */
.caderno__lista { border-top: var(--line) solid var(--c-line); }
.caderno__pedra { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--s-4); padding: var(--s-4) 0; border-bottom: var(--line) solid var(--c-line); }
.caderno__foto { width: 72px; height: 72px; object-fit: cover; background: var(--c-surface-2); }
.caderno__foto--vazia { display: block; border: var(--line) dashed var(--c-line-strong); background: transparent; }
.caderno__texto { min-width: 0; display: grid; gap: var(--s-1); }
.caderno__linha { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-3); }
/* com letra grande o número não passa da coluna (nunca parte): o teto acompanha a largura do ecrã */
.caderno__linha .n-pedra--medio .n-pedra__num { font-size: min(1.75rem, 11vw); }
.caderno__n { text-decoration: none; }
/* no toque o número da pedra publicada é um alvo de 44 px de altura */
@media (pointer: coarse) { .caderno__n { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; } }
@media (hover: hover) { .caderno__n:hover .n-pedra__num { text-decoration: underline; text-decoration-thickness: 1px; } }
.caderno__detalhe { color: var(--c-text-2); font-size: .9375rem; }
.caderno__novos { color: var(--c-moss); font-weight: 600; }
.caderno__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-2); }
.caderno__pedras .acoes { margin-top: var(--s-4); }
.caderno__secao { padding-block: var(--s-7) 0; }
.caderno__secao + .caderno__secao { border-top: 0; }
.caderno__secao .codigo { margin-top: 0; }
.caderno__alcunha-linha { display: flex; gap: var(--s-2); }
.caderno__alcunha-linha input { flex: 1; min-width: 0; }
@media (max-width: 22.49em) {
  .caderno__alcunha-linha { flex-direction: column; }
  .caderno__alcunha-linha .botao { width: 100%; }
  /* L0: o texto e as ações passam para baixo da miniatura, a toda a largura, para «entrepedrasepedrinhas.pt/» caber inteiro */
  .caderno__pedra { row-gap: var(--s-2); }
  .caderno__texto { display: contents; }
  .caderno__linha { align-self: center; }
  .caderno__detalhe, .caderno__acoes { grid-column: 1 / -1; }
  .caderno__acoes { margin-top: 0; }
  /* com letra grande a 280 px, a letra do endereço desce o bastante para «entrepedrasepedrinhas.pt/» ficar numa linha */
  .caderno__detalhe .endereco { font-size: min(1.04em, calc((100vw - 32px) / 12.4)); }
}
.caderno__alcunha-estado { margin-top: var(--s-1); }
.caderno__privada { margin-top: var(--s-3); color: var(--c-text-2); font-size: var(--fs-small); }
.caderno__privada .botao--texto { min-height: 0; padding: 0; font-size: inherit; font-family: inherit; }
.caderno__vazio .acoes { margin-top: var(--s-2); }
/* L0–L1: o par de ações a toda a largura, o primário primeiro (como em /de e no desafio) */
@media (max-width: 39.99em) {
  .caderno__vazio .acoes { flex-direction: column; align-items: stretch; padding-top: var(--s-4); }
  .caderno__vazio .acoes .botao { width: 100%; margin-top: 0; }
}
/* a ligação no meio da ajuda da alcunha: no toque a área cresce para 44 px sem mexer na linha */
@media (pointer: coarse) { .caderno__alcunha .campo__ajuda a { padding-block: 12px; } }
.caderno__privada-acoes { display: inline-flex; flex-wrap: wrap; column-gap: var(--s-4); }
.caderno__sem-memoria { margin-bottom: var(--s-5); }
/* o endereço parte depois de «.pt/» (<wbr>); a 280 px ou com letra grande parte onde for preciso, sem alargar a página */
.caderno__detalhe .endereco { overflow-wrap: anywhere; color: var(--c-text); }
/* imprimir só o código: o resto sai do fluxo (com visibility ficava a ocupar folhas em branco) */
@media print {
  html.imprimir-so body *:not(:has(.imprime-so)):not(.imprime-so):not(.imprime-so *) { display: none !important; }
  html.imprimir-so body, html.imprimir-so body *:has(.imprime-so) { margin: 0 !important; padding: 0 !important; min-height: 0 !important; height: auto !important; border: 0 !important; }
}

/* Conquistas: uma grelha de carimbos. Conseguidas a tinta e luz; por conseguir em contorno tracejado. */
.conquistas__titulo { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); }
.conquistas__conta { font-variant-numeric: tabular-nums; color: var(--c-text); }
.conquistas__intro { margin-bottom: var(--s-4); max-width: var(--measure); }
.conquistas__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--s-4); }
@media (min-width: 640px) { .conquistas__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.conquista { display: grid; justify-items: center; align-content: start; gap: var(--s-2); text-align: center; min-width: 0; }
.conquista .selo-svg { width: min(112px, 100%); height: auto; }
.conquista__texto { display: grid; gap: 2px; justify-items: center; min-width: 0; }
.conquista__nome { font-family: var(--f-ui); font-weight: 600; font-size: .9375rem; line-height: 1.2; color: var(--c-text); text-wrap: balance; }
.conquista--por-fazer .conquista__nome { color: var(--c-text-2); }
.conquista__frase { font-size: var(--fs-small); line-height: 1.35; color: var(--c-text-2); text-wrap: pretty; }
.conquista--por-fazer .conquista__frase { color: var(--c-text-3); }
.conquista__progresso { display: block; width: 72px; height: var(--line-2); margin-top: var(--s-2); background: var(--c-line); position: relative; }
.conquista__progresso > span { position: absolute; inset: 0 auto 0 0; background: var(--c-light); }
.conquista--por-fazer .conquista__progresso > span { background: var(--c-text-2); }
.conquistas__pais { margin-top: var(--s-7); padding-top: var(--s-5); border-top: var(--line) dashed var(--c-line); }
.conquistas__subtitulo { font-family: var(--f-ui); font-weight: 600; font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--c-text-2); margin-bottom: var(--s-2); }
.conquistas__pais .marcos { max-width: 420px; }
/* L0 e letra grande (o em das media queries cresce com a letra do sistema): uma conquista por linha, o carimbo
   ao lado do texto; os marcos partem o rótulo em vez de alargarem a página */
@media (max-width: 22.49em) {
  .conquistas__lista { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .conquista { grid-template-columns: 72px minmax(0, 1fr); justify-items: start; align-items: center; column-gap: var(--s-4); text-align: left; }
  .conquista .selo-svg { width: 72px; }
  /* a 72 px o texto em arco não se lê (fica < 7 px): sai, e o nome da conquista está mesmo ao lado */
  .conquista .selo__arcos, .conquista .selo__separador { display: none; }
  .conquista__texto { justify-items: start; }
  .conquista__nome { text-wrap: pretty; }
  .conquistas__pais .marcos { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--s-4); max-width: 18rem; }
  .conquistas__pais .marcos__texto { white-space: normal; overflow-wrap: break-word; text-align: center; }
}
.conquista__nome, .conquista__frase { overflow-wrap: break-word; }
#caderno .conquistas { min-height: 320px; }
/* selo raro por desbloquear: a coroa serrilhada a tracejado partia-se em ruído; fica contínua e apagada */
.selo-svg--bloqueado .selo__dentes { stroke-dasharray: none; opacity: .55; }

.recuperar { margin-top: var(--s-2); }
.recuperar .entrada--chave { font-size: 1.25rem !important; }
/* o código de 24 caracteres cabe inteiro a 320 px (e a 280 px) sem rolar dentro do campo */
/* com letra grande o rem cresce: a largura do campo é o limite (o código ocupa ~14,4 em; 50 px de margens, borda e
   folga), sem descer dos 16 px que evitam o zoom do iPhone ao tocar no campo */
@media (max-width: 24.99em) { .recuperar .entrada--chave { letter-spacing: .06em; font-size: min(max(1rem, 4.4vw), max(16px, calc((100vw - 50px) / 15))) !important; padding-inline: var(--s-2); } }
/* L0–L1: «Recuperar as pedras» a toda a largura */
@media (max-width: 39.99em) { .recuperar .acoes > .botao { width: 100%; } }
.recuperar__troca { margin-top: var(--s-4); }
.recuperar__troca p + p { margin-top: var(--s-2); }
.pagina-recuperar .mensagem p + p { margin-top: var(--s-2); }

/* ───────────── 8. Corrente: /de/147 (docs/dispositivos.md §3.9) ───────────── */
.de__origem:empty { display: none; }
/* Enquanto a pedra chega: o cartão já ocupa o seu lugar e o título guarda duas linhas (o «Quem te trouxe foi a
   pedra n.º 147» que vem a seguir), para nada saltar por baixo (CLS) */
.de__cartao--reserva { pointer-events: none; }
.de__foto--reserva { background: var(--c-deep); }
.de__cartao--reserva .de__legenda { visibility: hidden; }
.de--a-carregar .de__cabeca h1 { min-height: 2.3em; min-height: 2lh; }
.de__origem { margin-bottom: var(--s-6); }
.de__cartao { display: block; color: var(--c-text); text-decoration: none; border: var(--line) solid var(--c-line); background: var(--c-surface); }
@media (hover: hover) { .de__cartao:hover { border-color: var(--c-line-strong); } }
.de__cartao:active { border-color: var(--c-line-strong); }
.de__foto { display: block; width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; background: var(--c-deep); }
.de__legenda { display: grid; gap: 2px; padding: var(--s-3) var(--s-4) var(--s-4); }
.de__terra { font-family: var(--f-serif); font-size: 1.125rem; }
.de__quando { font-family: var(--f-ui); font-weight: 500; font-size: var(--fs-small); color: var(--c-text-2); }
.de__cabeca h1 .n-pedra__abrev { font-size: .4em; }
.de__cabeca h1 .n-pedra__num { font-size: 1.15em; font-weight: 400; }
.de__n { white-space: nowrap; }
.de__passos { margin-top: var(--s-2); }
/* Telemóvel: os dois botões empilhados a toda a largura */
@media (max-width: 39.99em) { .pagina-de .de__acoes { flex-direction: column; align-items: stretch; } .pagina-de .de__acoes .botao { width: 100%; } }
/* Deitado: a fotografia do cartão não passa de metade da altura */
@media (min-width: 30em) and (max-height: 35em) and (orientation: landscape) { .de__foto { max-height: 50svh; } }

@media (prefers-reduced-motion: reduce) {
  .revelacao--a-entrar .revelacao__numero .n-pedra__num { clip-path: none; }
  .revelacao--a-entrar *, .revelacao--entrou * { transition-duration: 150ms !important; transition-delay: 0ms !important; }
  .envio__barra > span { transition: none; }
}

/* ───────── Espaço reservado enquanto o formulário e o caderno carregam (evita que o rodapé salte, CLS) ───────── */
#publicar:has(> .secundario:only-child) { min-height: 36vh; }
#caderno:has(> .secundario:only-child) { min-height: 44vh; }

/* Encontros vazios: o desenho (recortado ao traço, 148 × 40) ao tamanho de leitura, sem encolher o texto ao lado */
.pedra__encontros .vazio-curto--ilustrado .ilustracao { width: clamp(96px, 30vw, 148px); height: auto; }