/* O cartao do tempo - o que aparece na coluna da direita da televisao quando
 * chega a vez do clima.
 *
 * **Porque e que nao vive no `oferta-peca.css`.** Aquele ficheiro e carregado
 * em dois sitios (a TV e a pre-visualizacao do formulario de ofertas) e o
 * docstring dele diz-lhe porque: para a previsao nunca divergir da parede. O
 * clima nao tem formulario nem pre-visualizacao, e nao e uma oferta - e
 * conteudo do canal. Enfia-lo la dentro fazia o ficheiro passar a ter duas
 * razoes para mudar, e a segunda ia arrastar a primeira.
 *
 * O que **e** partilhado, e tem de continuar a ser, e o contrato da caixa:
 * 640x1080 em pixeis fixos, area segura de 56px, fundo Ink, tipos da mesma
 * escala. O painel encolhe tudo com um `transform: scale()` por fora, e as
 * duas pecas encolhem juntas. Se um dia estes numeros divergirem, o canal
 * passa a ter duas larguras conforme o que calhou entrar.
 *
 * Prefixos `-webkit-` porque isto tambem corre num Chromium 53 (webOS 4). */

.peca-clima {
  position: relative;
  width: 640px;
  height: 1080px;
  box-sizing: border-box;
  /* A mesma area segura da peca de oferta. A TV corta a beira do quadro. */
  padding: 56px;
  background: #14100D;
  color: #FFFDFA;
  font-family: "Archivo", Arial, Helvetica, sans-serif;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  overflow: hidden;
  /* Explicito, e nao herdado. O `#oferta` centra o conteudo para o `<img>` da
   * peca em PNG ficar no meio da coluna, e isso descia ate aqui: o topo do
   * cartao saia centrado e as linhas dos dias - que sao `flex` e nao herdam -
   * saiam a esquerda. Duas margens no mesmo cartao, sem ninguem ter decidido
   * nenhuma delas. A esquerda e a mesma da peca de oferta. */
  text-align: left;
}

/* A terra. Em cima e discreta: quem esta na sala ja sabe onde esta - o nome
 * serve para nao restar duvida de que a previsao e daqui e nao do pais. */
.peca-clima .terra {
  font-size: 34px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: #F6F1E9;
  opacity: 0.55;
  margin: 0 0 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* AGORA.
 *
 * O numero grande e a unica coisa que uma pessoa sentada a quatro metros le
 * sem querer - a mesma razao pela qual o preco da oferta esta a 132px. Aqui
 * vai mais alto, a 168px, porque «22°» tem tres caracteres e o preco tem
 * quatro ou cinco: o que manda e a largura ocupada, nao o corpo da letra.
 *
 * Spot Orange como letra passa aqui pela mesma razao que passa na oferta:
 * sobre Ink da 9,08:1. O que reprova e Spot Orange sobre Paper, e por isso e
 * que este cartao tem fundo escuro. */
.peca-clima .agora {
  font-size: 168px;
  line-height: 0.95;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #F2A33C;
  margin: 0;
  white-space: nowrap;
}

/* Sem observacao recente o numero grande nao aparece de todo, e o cartao
 * passa a ser so previsao. Ver `_ultima_observacao()` no `clima.py`: uma
 * temperatura de ha cinco horas ao lado da palavra «agora» e uma mentira
 * pequena que quem esta a olhar para a rua deteta em dois segundos. */
.peca-clima.sem-agora .agora,
.peca-clima.sem-agora .estacao {
  display: none;
}

/* Onde foi medido. Uma temperatura sem sitio, no Algarve, e uma temperatura
 * que pode ser da serra a 30 km - e em Agosto isso sao cinco graus. */
.peca-clima .estacao {
  font-size: 24px;
  line-height: 1.3;
  font-weight: 400;
  color: #F6F1E9;
  opacity: 0.45;
  margin: 12px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* O tempo de hoje, por extenso. E a frase que decide se alguem leva casaco. */
.peca-clima .hoje-tempo {
  font-size: 44px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 28px 0 0;
  overflow-wrap: break-word;
}

.peca-clima .hoje-graus {
  font-size: 32px;
  line-height: 1.3;
  font-weight: 400;
  color: #F6F1E9;
  opacity: 0.75;
  margin: 10px 0 0;
  white-space: nowrap;
}

/* O fio. Spot Orange como superficie - a mesma regra da peca de oferta, e
 * pela mesma razao: sobre este fundo passaria por letra, mas a regra da marca
 * e simples de mais para se abrirem excepcoes por conveniencia. */
.peca-clima .fio {
  width: 96px;
  height: 8px;
  background: #F2A33C;
  margin: 36px 0;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
}

/* Os proximos dias. Tres linhas, e sao tres elementos que existem no HTML
 * desde o arranque - nunca se criam nem se destroem. Um dia que nao venha na
 * resposta esconde-se com `hidden`; e a regra 1 do `player.js` e e como esta
 * pagina sobrevive a catorze horas seguidas. */
.peca-clima .dia {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: baseline;
  -webkit-align-items: baseline;
  align-items: baseline;
  margin: 0 0 22px;
}

.peca-clima .dia:last-of-type {
  margin-bottom: 0;
}

/* A barra de familia. Sete tipos de tempo do IPMA reduzidos a uma cor, para
 * a linha se ler antes de ser lida: a mancha azul da chuva percebe-se do
 * outro lado da sala, a palavra «Aguaceiros» nao.
 *
 * Largura fixa e nao percentagem: esta peca e desenhada em pixeis. */
.peca-clima .dia .marca {
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
  width: 10px;
  height: 38px;
  margin-right: 20px;
  background: #9AA3A8;
  -webkit-transform: translateY(6px);
  transform: translateY(6px);
}

.peca-clima .dia.limpo .marca    { background: #F2A33C; }
.peca-clima .dia.sol .marca      { background: #E8C77A; }
.peca-clima .dia.nublado .marca  { background: #9AA3A8; }
.peca-clima .dia.chuva .marca    { background: #5B8FB9; }
.peca-clima .dia.trovoada .marca { background: #8F7BC4; }
.peca-clima .dia.nevoeiro .marca { background: #C3BDB2; }
.peca-clima .dia.neve .marca     { background: #DCE8F0; }

.peca-clima .dia .nome {
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
  /* Largura fixa para as temperaturas alinharem em coluna. «Domingo» e o
   * nome mais longo que aqui cabe, e a 34px mede 148px. */
  width: 190px;
  font-size: 34px;
  line-height: 1.2;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.peca-clima .dia .graus {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  font-size: 34px;
  line-height: 1.2;
  font-weight: 400;
  color: #F6F1E9;
  opacity: 0.8;
  white-space: nowrap;
}

/* A percentagem de chuva so aparece quando ha alguma - «chuva 0%» e ruido
 * numa linha que tem de se ler de relance. O `player.js` esconde a caixa
 * inteira abaixo de 10%. */
.peca-clima .dia .chuva {
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 600;
  color: #5B8FB9;
  white-space: nowrap;
}

/* A fonte. Nao e assinatura estetica e nao se corta: os dados abertos do
 * IPMA sao gratuitos e sem chave, e a licenca pede atribuicao. Fica com a
 * mesma discricao do nome do salao na peca de oferta - em baixo, presente,
 * sem disputar a leitura. */
.peca-clima .fonte {
  line-height: 1.2;
  position: absolute;
  left: 56px;
  right: 56px;
  bottom: 56px;
  font-size: 26px;
  font-weight: 600;
  color: #F6F1E9;
  opacity: 0.45;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}