/* estilo_v2.css - o que a v2 muda por cima da folha da v1 (estilo.css).
   Carrega-se DEPOIS dela em todas as paginas. Ordens dele, 6 de Setembro:

   1  A TRANSPARENCIA DAS MOLDURAS DA CHEGADA EM TODAS AS PAGINAS. A folha da
      v1 da `calc(var(--caixas)*1%)` a `.painel`, `.est-topo`, `.est-accoes`,
      `.abc-v` e `table`, e `*0.4%` so as molduras da chegada. Aqui as caixas
      GRANDES, as que sao o fundo de que os cartoes se destacam, passam todas
      para a formula da chegada; os cartoes pequenos (`.cartao`, `.livro`)
      ficam a 1%, como na chegada, para se destacarem do fundo.

   2  O LIVRO ENCOSTADO EM CIMA. O cartao da estante usa `<span class="moldura">`
      a volta da capa, e a folha da v1 tem regras de `.moldura` escritas para
      as molduras GRANDES da chegada (margin 56px 0, padding-bottom 22px, um
      fundo): caiam em cima do cartao e abriam um vazio por cima e por baixo da
      capa. Aqui a moldura do cartao fica sem margem, sem enchimento e sem
      fundo, e a faixa com o titulo vem logo por baixo. */

.painel,.est-topo,.est-accoes,.abc-v,table,#trabalho,.caixa{
 background:color-mix(in srgb,var(--caixa) calc(var(--caixas)*0.4%),transparent)}
.cartao,.livro,.moldura .cartao{
 background:color-mix(in srgb,var(--caixa) calc(var(--caixas)*1%),transparent)}

.livro .moldura,.livro .moldura:first-of-type{margin:0;padding:0;background:none;border:0;border-radius:0}
.livro{padding:6px 6px 6px}
.livro .faixa{margin-top:4px;padding:3px 5px 3px}
.livro .faixa .tit{margin:0}
.livro .faixa .aut,.livro .faixa .marcas{margin-top:1px}

/* 3  A ASSINATURA E O TITULO DA ENTRADA. `PJR` em EB Garamond italico
      (licenca OFL, servida daqui; a fonte e variavel e usa-se o peso 600):
      classico e simples, escolhido por ele entre seis. O titulo da entrada
      sobe um pouco sem mexer na caixa da palavra-passe. E `SHELLBOOK` passa
      a CASTANHO, com um brilho dourado a atravessa-lo em movimento: o
      gradiente da v1 era creme e lia-se escuro por cima da fotografia. */
@font-face{font-family:"EB Garamond";src:url("/estatico/EBGaramond-Italic.ttf") format("truetype");font-style:italic;font-weight:400 800;font-display:swap}
.pjr{font-family:"EB Garamond",Garamond,"Times New Roman",serif;font-style:italic;font-weight:600;text-transform:none;letter-spacing:.02em}
.entrar h1{position:relative;top:-26px}
.entrar h1 .pjr{font-size:1.1em;line-height:1;vertical-align:-.03em;font-weight:700;
 text-shadow:0 2px 3px rgba(0,0,0,.6)}
.barra .assina .pjr{font-size:1.45em;line-height:1;vertical-align:-.1em;color:var(--texto)}
.entrar h1 .cintila{font-size:1.18em;background:linear-gradient(90deg,#5e3814 0%,#86571f 30%,#c99a4a 46%,#f3d894 50%,#c99a4a 54%,#86571f 70%,#5e3814 100%);
 background-size:250% 100%;background-repeat:repeat-x;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
 animation:sb-castanho 3.2s linear infinite;filter:none;text-shadow:none}
/* SEM SALTO NA VOLTA: o gradiente e horizontal e as duas pontas tem a mesma cor, por isso a imagem repete-se sem
   costura; e a animacao anda EXACTAMENTE uma imagem (com a imagem a 250 % da caixa, uma posicao de -166,667 %
   desloca-a 250 %), pelo que o fim de um ciclo e igual ao principio do seguinte. Ordem dele. */
/* SEM SOMBRA: o `h1` da casa tem um halo escuro (`text-shadow`, herdado pelo span) e, com a letra transparente para o gradiente a aparecer, era o halo que se via. Era isso que fazia o SHELLBOOK ler-se escuro, ja na v1. */
@keyframes sb-castanho{0%{background-position:0 0}100%{background-position:-166.667% 0}}
@media (prefers-reduced-motion:reduce){.entrar h1 .cintila{animation:none;-webkit-text-fill-color:#a67a3a;color:#a67a3a}}

/* 4  O BRILHO NA PONTA DA PERNA DO R (em baixo, a direita). No fim de cada ciclo do gradiente acende
      um ponto pequeno na ponta do `R` de PJR, e apaga-se depressa: mesmo relogio (3,2 s), aceso entre os
      92 % e os 100 % do ciclo. Ordem dele. */
.entrar h1 .pjr{position:relative;display:inline-block}
.entrar h1 .pjr::after{content:"";position:absolute;right:-1px;bottom:3px;width:5px;height:5px;border-radius:50%;
 background:#fff8e6;box-shadow:0 0 6px 2px rgba(255,240,200,.95),0 0 14px 5px rgba(255,220,150,.55);
 opacity:0;pointer-events:none;animation:sb-ponta 3.2s linear infinite}
@keyframes sb-ponta{0%,90%{opacity:0;transform:scale(.4)}95%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.5)}}
@media (prefers-reduced-motion:reduce){.entrar h1 .pjr::after{animation:none;display:none}}

/* 5  NO TELEMOVEL A BARRA DE NAVEGACAO FICA FIXA em cima: as molduras que rolam por dentro (a estante)
      nao deixavam puxar a pagina o suficiente para a ver. Ordem dele; no computador nada muda. */
@media (max-width:720px){
 .barra{position:fixed;top:0;left:0;right:0;z-index:40}
 body{padding-top:38px}
 .entrar{top:60%}
}

/* 6  O SLIDE DA EXIGENCIA no balcao (ordem dele): a semelhanca minima do titulo quando so o apelido
      bate, de 50 a 100 por cento; muda e a procura volta a correr. */
.bal-exigencia{display:flex;align-items:center;gap:12px;margin:6px 0 10px;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--fraco)}
.bal-exigencia input[type=range]{flex:0 1 260px;accent-color:#d8b268}
.bal-chao-valor{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;color:var(--texto);min-width:44px}

/* OS QUATRO CANTOS DA BARRA. Em cima a esquerda COMECOU, em cima a direita
   a PREVISAO do fim; em baixo a esquerda o DECORRIDO ao segundo, em baixo a
   direita feito de previsto. A previsao encosta a direita como o `tr-fim`,
   para ficar sempre na mesma coluna do ecra. */
.trabalho-topo{margin-bottom:6px}
.trabalho-topo p{margin:0}
.trabalho-topo .previsao{text-align:right;white-space:nowrap}
.trabalho-fundo .decorrido{white-space:nowrap}
@media (max-width:720px){
  .trabalho-topo{flex-wrap:wrap}
  .trabalho-topo .quando{flex:1 0 100%;white-space:nowrap}
  .trabalho-topo .previsao{flex:1 0 100%}
}

/* OS CARTOES COM LINHA CONTINUA (ordem dele, 6 de Setembro). A folha da v1
   da `border-style:dashed` a todos os `.cartao`; com os paineis mais
   transparentes o tracejado saltava a vista contra a fotografia. */
.cartao,.moldura .cartao,button.cartao{border-style:solid}


/* A DATA DE ENTRADA (ordem dele, 6 de Setembro): a caixa de texto AAAA-MM-DD HH:MM,
   o botao do calendario (com a caixa `date` do browser invisivel por cima, para o
   toque abrir o calendario nativo), as listas HH e MM, e a LISTA dos momentos
   registados. Tudo numa fila que parte em duas no telemovel. */
.eb-momento{display:flex;flex-wrap:nowrap;gap:3px;min-width:0;align-items:center}
.est-topo .eb-momento input[type=text]{flex:1 1 60px;min-width:0;padding-left:6px;padding-right:2px}
.eb-cal{position:relative;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
width:30px;height:28px;border:1px solid var(--linha);border-radius:8px;background:rgba(0,0,0,.32);
color:var(--fraco);font-size:14px;cursor:pointer;box-sizing:border-box}
.eb-cal:hover{border-color:var(--aceso);color:var(--aceso)}
.eb-cal input[type=date]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;
margin:0;padding:0;border:0;color-scheme:dark}
.est-topo .eb-momento select.eb-hora,.est-topo .eb-momento select.eb-minuto,
.est-topo .eb-momento select.eb-enche{flex:0 0 auto;width:auto;appearance:none;-webkit-appearance:none;
padding:6px 5px;font-size:10px;letter-spacing:0;text-align:center;border-radius:8px;cursor:pointer}
.est-topo .eb-momento select.eb-enche{color:var(--fraco);font-size:13px;line-height:1;padding:4px 0;width:30px}
.est-topo .eb-momento select:hover{border-color:var(--aceso)}

/* NO TELEMOVEL A BARRA DOS FILTROS ROLA POR DENTRO. A pagina da estante nao rola
   (o corpo e `overflow:hidden` e a lista rola dentro do quadro); com MAIS FILTROS
   aberto numa coluna a barra ficava mais alta do que o ecra e os ultimos filtros
   nao se alcancavam. Aqui a barra pode encolher e rola. */
@media (max-width:720px){
  .eb-momento{flex-wrap:wrap}
  .est-topo .eb-momento input[type=text]{flex:1 1 100%}
  /* NAO ENCOLHE (flex 0 0 auto): com `0 1 auto` a barra dividia o ecra com a lista
     pelo peso do conteudo, e com sessenta cartoes ficava com 91 px, uma fresta onde
     os filtros abertos nao se viam. Aqui tem a altura do conteudo ate ao tecto, e a
     lista fica com o resto. */
  .est-topo{flex:0 0 auto;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  max-height:calc(100dvh - var(--barra-alta) - 110px)}
}

/* CINCO PAGINAS NA BARRA (a LIXEIRA entrou na segunda parte da etapa 6): no
   telemovel os cinco nomes mais o SAIR nao cabiam em 390 px e o SAIR saia do
   ecra. Letra e espacos um pouco mais apertados, so ate 560 px. */
@media (max-width:560px){
  .barra{gap:7px;font-size:9px;letter-spacing:.08em;padding:9px 8px}
  .barra .sair{margin-left:auto;padding:3px 7px}
}