/* O plano preço × área. Acompanha `web/mercado.js`.
 *
 * Não há um único `style=` aqui nem lá: a CSP publicada (web/_headers) é
 * `style-src 'self'`, e é isso que garante que uma injecção não consegue
 * desenhar nada. Onde um valor tem de ser dinâmico — a posição de um ponto,
 * a caixa da janela — usam-se atributos de SVG, que não são CSS.
 *
 * As cores vêm todas dos tokens de `styles.css`: as bandas fiscais são a
 * linguagem do painel inteiro e não podem ser outras aqui. Só há valores
 * próprios onde não existe token (a espessura de um traço, um raio de canto).
 */

.mercado {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Um item de grelha ou de flexbox tem `min-width: auto`, e a tira dos
     melhores €/m² tem 24 cartões de 228 px: a largura mínima do conteúdo dá
     5 656 px e é ela que ganha à coluna que devia contê-la. Sem estes zeros o
     plano nasce com cinco mil pixéis de largura e empurra a página inteira
     para fora do ecrã — e a tira deixa de deslizar, porque já não há nada a
     transbordar. */
  min-width: 0;
}

/* --------------------------------- cabeçalho ------------------------------ */

.mercado-cab {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.mercado-cab b {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-right: 3px;
}
.mercado-cab-n b { color: var(--series-1); }
.mercado-cab-med { color: var(--text-secondary); }
.mercado-legenda {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}
/* A chave de cores repete a bolinha do distintivo das bandas: quem já leu a
   tabela reconhece-a sem aprender nada de novo. */
.mercado-chave {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  /* As classes `.banda-*` de styles.css são as do distintivo e trazem fundo
     tingido e contorno. Aqui só se quer a cor: uma chave de legenda com caixa
     à volta lê-se como um botão que se pode carregar, e não se pode.
     Sem `color` próprio de propósito: esta folha carrega depois de styles.css
     e um `color` aqui ganhava ao da banda — a chave ficava toda cinzenta e
     deixava de dizer o que a cor do ponto quer dizer. */
  background: none;
  border: 0;
  padding: 0;
}
.mercado-chave::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.mercado-chave-eco { color: var(--text-muted); opacity: 0.75; }

/* ----------------------------------- plano -------------------------------- */

.mercado-plano {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  min-height: 260px;
  /* Um plano de 16/10 com 1 050 px de largura tem 656 px de altura e empurra
     a tira dos melhores €/m² para fora do ecrã. O tecto em `vh` corta-o antes
     disso; a proporção manda enquanto couber. */
  max-height: 60vh;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--raio-bloco);
  overflow: hidden;
  /* Sem isto o browser rouba o gesto para deslizar a página e a janela nunca
     se chega a arrastar em telemóvel. */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.mercado-fundo,
.mercado-tela,
.mercado-sobre {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.mercado-sobre { cursor: crosshair; }
.mercado-sobre.mercado-a-arrastar { cursor: grabbing; }

.mercado-faixa { stroke: none; }
.mercado-faixa-verde    { fill: var(--banda-verde-bg); }
.mercado-faixa-ambar    { fill: var(--banda-ambar-bg); }
.mercado-faixa-vermelho { fill: var(--banda-vermelho-bg); }
.mercado-faixa-fora     { fill: var(--banda-fora-bg); }

.mercado-grelha { stroke: var(--grid); stroke-width: 1; }
.mercado-eixo   { stroke: var(--baseline); stroke-width: 1; }
.mercado-rot {
  fill: var(--text-muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.mercado-rot-eixo { font-weight: 600; }
.mercado-rot-banda { font-size: 11px; font-weight: 600; }
.mercado-rot-verde    { fill: var(--banda-verde); }
.mercado-rot-ambar    { fill: var(--banda-ambar); }
.mercado-rot-vermelho { fill: var(--banda-vermelho); }
.mercado-rot-fora     { fill: var(--banda-fora); }

/* As isolinhas são referência, não dados: ficam esbatidas e tracejadas para o
   olho as ler como grelha e não como mais uma série. */
.mercado-iso {
  stroke: var(--text-muted);
  stroke-opacity: 0.45;
  stroke-dasharray: 3 4;
  stroke-width: 1;
}
.mercado-iso-rot { fill: var(--text-muted); font-size: 10px; }

/* A mediana é a única diagonal que fala dos anúncios que estão à vista, e por
   isso é a única com cor própria. */
.mercado-mediana {
  stroke: var(--series-2);
  stroke-width: 1.6;
  stroke-dasharray: 6 4;
}
.mercado-mediana-rot { fill: var(--series-2); font-size: 11px; font-weight: 600; }

.mercado-janela {
  fill: var(--series-1);
  fill-opacity: 0.08;
  stroke: var(--series-1);
  stroke-width: 2;
}
.mercado-janela-rot { fill: var(--series-1); font-size: 11px; font-weight: 700; }
.mercado-pega {
  fill: var(--surface-1);
  stroke: var(--series-1);
  stroke-width: 2;
  cursor: nwse-resize;
}

/* ---------------------------- campos da janela ---------------------------- */
/* Arrastar é rápido; escrever é exacto. Os dois gestos escrevem a mesma
   janela, e em telemóvel o segundo é muitas vezes o único praticável. */

.mercado-campos {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 8px 10px;
}
.mercado-campo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.7rem;
  color: var(--text-muted);
}
.mercado-campo-rot { text-transform: uppercase; letter-spacing: 0.05em; }
.mercado-campo-input {
  /* Cabe um preço de seis algarismos. Com menos, o campo cortava o número
     pela direita e "250000" aparecia como "2500" — um valor que existe e está
     errado é pior do que um campo vazio. O resto do desenho — altura, borda,
     raio, superfície — vem do campo do site, em styles.css. */
  width: 11ch;
  font-variant-numeric: tabular-nums;
  /* As setas do `type=number` roubam três caracteres de largura e não servem
     para nada num campo que se escreve ou se arrasta no plano. */
  appearance: textfield;
  -moz-appearance: textfield;
}
.mercado-campo-input::-webkit-outer-spin-button,
.mercado-campo-input::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}
.mercado-btn { align-self: end; height: 30px; }

.mercado-pe {
  margin: 0;
  font-size: 0.74rem;
  color: var(--text-muted);
  max-width: 90ch;
}

/* ------------------------- tira dos melhores €/m² ------------------------- */

.mercado-tira { margin-top: 6px; min-width: 0; }
.mercado-tira-tit {
  margin: 0 0 8px;
  font-size: 0.95rem;
  display: flex;
  gap: 10px;
  align-items: baseline;
}
.mercado-tira-tit small { font-size: 0.74rem; font-weight: 400; color: var(--text-muted); }
.mercado-vazio { margin: 0; font-size: 0.8rem; color: var(--text-muted); }

.mercado-cartoes {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 228px;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x proximity;
  min-width: 0;
}
/* O desenho do cartão — a superfície, o título, a linha de contexto, o preço
   e a bolinha — vem de styles.css e é o mesmo da lista dos mais próximos do
   Radar. Aqui só o arranjo: fotografia em cima, o resto por baixo. */
.mercado-cartao {
  scroll-snap-align: start;
  display: grid;
  grid-template-rows: 92px auto;
  overflow: hidden;
}
.mercado-cartao-img {
  width: 100%;
  height: 92px;
  object-fit: cover;
  display: block;
  background: var(--surface-2);
}
/* Publicado, a CSP bloqueia as miniaturas dos CDNs dos portais — é
   deliberado (ver web/_headers). O cartão continua a dizer tudo em texto. */
.mercado-cartao-sem { background: var(--surface-2); }
.mercado-cartao-corpo { padding: 7px 9px 9px; display: block; }
.mercado-cartao-m2 { display: block; }
.mercado-cartao-tit {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 2px;
  line-height: 1.25;
}
.mercado-cartao-sub { display: block; margin-top: 2px; }

/* ------------------------------ legenda "e se" ---------------------------- */

.mercado-legenda-ese { display: flex; flex-direction: column; gap: 10px; }
.mercado-ese-topo {
  margin: 0;
  font-size: 0.76rem;
  color: var(--text-muted);
}
.mercado-ese-topo b { font-size: 1.05rem; color: var(--text-primary); }
.mercado-bloco {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--raio-bloco);
  padding: 9px 11px;
}
.mercado-bloco-tit {
  margin: 0 0 7px;
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
/* Quanto este critério corta. É a promessa da visão: mostrar o que se recusa,
   não só o que sobra. */
.mercado-corta {
  color: var(--banda-vermelho);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.mercado-corta-zero { color: var(--text-muted); opacity: 0.6; }
/* As opções são da família dos controlos (styles.css), com a forma de pílula
   do `.chip`: contorno, superfície e realce tingido vêm de lá. Aqui só as
   medidas e o caso de não haver nada para carregar. */
.mercado-opcoes { display: flex; flex-wrap: wrap; gap: 4px; }
.mercado-opc {
  gap: 5px;
  min-height: 28px;
  padding: 0 9px;
  border-radius: var(--raio-pilula);
  font-size: 0.78rem;
  font-weight: 500;
}
.mercado-opc-on { font-weight: 600; }
.mercado-opc[disabled] { cursor: default; opacity: 0.7; }
.mercado-opc-n { font-size: 0.68rem; }
.mercado-nota { margin: 6px 0 0; font-size: 0.7rem; color: var(--text-muted); }

/* --------------------------------- estreito ------------------------------- */
/* Em telemóvel o plano fica quadrado (uma faixa de 16/10 com 360 px de largura
   tem 225 px de altura e não se arrasta lá nada), as pegas crescem — o
   tamanho é decidido no módulo, que é quem desenha o SVG — e os campos
   numéricos ficam do tamanho de um dedo. */

@media (max-width: 640px) {
  .mercado-plano { aspect-ratio: 1; min-height: 320px; }
  .mercado-cab b { font-size: 1.1rem; }
  .mercado-legenda { margin-left: 0; }
  .mercado-campos { display: grid; grid-template-columns: 1fr 1fr; }
  .mercado-campo-input { width: 100%; height: 40px; font-size: 1rem; }
  .mercado-btn { grid-column: 1 / -1; height: 36px; }
  .mercado-cartoes { grid-auto-columns: 200px; }
  .mercado-opc { min-height: 34px; font-size: 0.82rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mercado *, .mercado *::before, .mercado *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .mercado-cartoes { scroll-snap-type: none; }
}

/* ------------------------------ os Gráficos -------------------------------- */
/* A página `web/graficos.html`. O plano ocupa a largura toda que a página dá,
   com tecto: a 1440 px sem tecto ele fica com 1408 de largura por 540 de
   altura — uma fita, e numa fita as diagonais de €/m² deitam-se e deixam de se
   ler como inclinações. O tecto guarda a proporção que o protótipo provou. */
.plano-cx { max-width: 1180px; margin: 0 auto; min-width: 0; }

/* A lista de baixo reaproveita o cartão dos mais próximos do Radar — a mesma
   grelha, o mesmo cartão. O que muda é o que está na primeira coluna: lá é a
   distância, aqui é o prémio face à mediana do concelho. */
.melhores { margin-top: 22px; }
.melhores h2 {
  font: 600 0.7rem inherit; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-muted); margin: 0 0 8px;
}
.melhores h2 small {
  text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 0.72rem;
}
/* Abaixo da mediana é verde e acima é âmbar, com a mesma leitura do resto do
   painel: o que poupa dinheiro é verde. O `.d` do cartão vem de radar.css. */
.melhores .contacto .d { color: var(--banda-verde); font-variant-numeric: tabular-nums; }
.melhores .contacto .d small { color: var(--text-muted); font-weight: 400; }
.melhores .nota-fora { margin-top: 10px; font-size: 0.74rem; max-width: 76ch; }