:root{--aceso:#fff7e6;--alerta-solto:#ff8d7f;--caixa:#17110a;--fraco:#d4c2a4;--fundo:#0b0805;--linha:#3a2c18;--solto:#ffffff;--texto:#f0e4cf;--alerta:#c0392b;--nota:#7a6a2f;--ok:#3f7d4e;--largura:1100px;--sol-x:60%;--sol-y:13%;--veu:35;--caixas:73;--raios:40;--difusao:10;--halo:0;--ritmo:100;--sombra:100;--brilhos:31;--tamanho:35;--centelha:1660;--cada:21;--duplos:25;--base:calc(var(--tamanho) * 0.1vmin);--flash:calc(var(--centelha) * 1ms);--dif:calc(var(--difusao) * 1px)}
/* A CENA VIVE NUMA CAMADA FIXA E NAO NO `html`, e a razao foi vista no ecra:
   o `html` CRESCE COM O CONTEUDO, e com `background-size: cover` a
   fotografia volta a ser escalada de cada vez que a pagina fica mais alta.
   Bastou aparecer a listagem das chegadas para o fundo dar um salto de zoom.

   NAO SE RESOLVE COM `background-attachment: fixed`, que parte no Safari do
   telemovel e ja foi recusado por isso. Resolve-se com um elemento proprio,
   colado ao ecra, que nunca muda de tamanho com nada.

   E ISTO ARRUMA UMA SEGUNDA COISA: os brilhos voltam a ser `fixed` como a
   cena, e a conta do `cover` passa a ser sobre o ECRA e nao sobre o
   documento. Eram duas pecas a tentar concordar sobre uma caixa que mexia. */
html{min-height:100%;background:var(--fundo)}
#cena{position:fixed;inset:0;z-index:-1;pointer-events:none;
background-color:var(--fundo);
background-image:
 radial-gradient(circle at var(--sol-x) var(--sol-y),
  rgba(255,236,186,calc(var(--halo)/100*.55)) 0%,
  rgba(255,214,134,calc(var(--halo)/100*.30)) 14%,
  rgba(255,196,96,calc(var(--halo)/100*.12)) 32%,
  rgba(255,190,90,0) 58%),
 linear-gradient(rgba(11,8,5,calc(var(--veu)/100)),
                 rgba(11,8,5,calc(var(--veu)/100))),
 url("/estatico/fundo.webp");
background-size:cover,cover,cover;background-position:center,center,center;
background-repeat:no-repeat,no-repeat,no-repeat}
body{margin:0;background:transparent;min-height:100vh;color:var(--texto);
font:13px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
 "Helvetica Neue",Arial,sans-serif;
letter-spacing:.08em;text-transform:uppercase}
/* AS MAIUSCULAS NAO CHEGAM AOS NOMES, e aqui a razao vale a dobrar: esta
   aplicacao mostra TITULOS e AUTORES em quase todos os ecras, e a lei do nome
   ja escreve o disco em maiusculas de proposito. Sem isto ninguem distinguia
   o titulo do nome do ficheiro. Um nome apresentado que nao e o nome real e
   pior do que uma pagina feia. */
.mono,.obra,.caminho,input,textarea,pre,code{text-transform:none;
letter-spacing:0}
.mono,pre,code,.caminho{font-family:ui-monospace,Menlo,Consolas,monospace}

h1,h2,p.intro,.solto,.solto small,.fora,.assina-entrada,.falhou{
color:var(--solto);
text-shadow:0 1px 2px rgba(0,0,0,calc(var(--sombra)/100)),
 0 0 6px rgba(0,0,0,calc(var(--sombra)/100*.85)),
 0 0 18px rgba(0,0,0,calc(var(--sombra)/100*.55))}
h1{font-size:18px;letter-spacing:.22em;font-weight:400;margin:26px 0 6px}
h2{font-size:12px;letter-spacing:.20em;font-weight:400;margin:30px 0 10px;
opacity:.9}
p.intro{max-width:60ch;margin:0 0 8px;opacity:.85}
/* A FRASE DE ABERTURA DAS PAGINAS DE CASOS usa a largura toda. As 60ch da
   regra de cima sao 60 letras de um texto pequeno, que a 12px dao pouco mais
   de 300 pixeis: numa moldura de 1100 a frase ficava numa coluna estreita e
   alta. Foi o Paulo a ve-lo. */
p.intro.larga{max-width:100%}
.solto small{display:block;text-transform:none;letter-spacing:0;font-size:11px;
margin-top:4px;opacity:.85}
/* A assinatura e o aviso de falha herdam o halo da regra de cima e so mudam
   a cor: e por isso que estao no mesmo selector e nao numa regra propria. */
.assina-entrada{font-size:10px;letter-spacing:.18em;opacity:.55;margin:22px 0 0}
.assina-entrada i{text-transform:lowercase;font-style:italic}
.falhou{color:var(--alerta-solto);font-size:11px;letter-spacing:.10em}

html::before,html::after,body::before,body::after{content:"";position:fixed;
inset:-30vmax;pointer-events:none;z-index:0;
transform-origin:var(--sol-x) var(--sol-y);mix-blend-mode:screen;
-webkit-mask-image:radial-gradient(circle at var(--sol-x) var(--sol-y),
 rgba(0,0,0,.95) 0%,rgba(0,0,0,.72) 18%,rgba(0,0,0,.38) 44%,
 rgba(0,0,0,.12) 64%,rgba(0,0,0,0) 82%);
mask-image:radial-gradient(circle at var(--sol-x) var(--sol-y),
 rgba(0,0,0,.95) 0%,rgba(0,0,0,.72) 18%,rgba(0,0,0,.38) 44%,
 rgba(0,0,0,.12) 64%,rgba(0,0,0,0) 82%)}
html::before{background:conic-gradient(from 0deg at var(--sol-x) var(--sol-y),rgba(255,228,163,0) 0deg,rgba(255,228,163,0) 107.72deg,rgba(255,228,163,calc(var(--raios)/100*0.209)) 109.13deg,rgba(255,228,163,calc(var(--raios)/100*0.696)) 110.29deg,rgba(255,228,163,calc(var(--raios)/100*0.209)) 111.45deg,rgba(255,228,163,0) 112.86deg,rgba(255,228,163,0) 117.37deg,rgba(255,228,163,calc(var(--raios)/100*0.121)) 119.07deg,rgba(255,228,163,calc(var(--raios)/100*0.403)) 120.46deg,rgba(255,228,163,calc(var(--raios)/100*0.121)) 121.86deg,rgba(255,228,163,0) 123.56deg,rgba(255,228,163,0) 137.98deg,rgba(255,228,163,calc(var(--raios)/100*0.225)) 139.04deg,rgba(255,228,163,calc(var(--raios)/100*0.749)) 139.91deg,rgba(255,228,163,calc(var(--raios)/100*0.225)) 140.78deg,rgba(255,228,163,0) 141.84deg,rgba(255,228,163,0) 150.04deg,rgba(255,228,163,calc(var(--raios)/100*0.164)) 154.03deg,rgba(255,228,163,calc(var(--raios)/100*0.545)) 157.29deg,rgba(255,228,163,calc(var(--raios)/100*0.164)) 160.56deg,rgba(255,228,163,0) 164.54deg,rgba(255,228,163,0) 179.82deg,rgba(255,228,163,calc(var(--raios)/100*0.287)) 180.70deg,rgba(255,228,163,calc(var(--raios)/100*0.956)) 181.41deg,rgba(255,228,163,calc(var(--raios)/100*0.287)) 182.13deg,rgba(255,228,163,0) 183.01deg,rgba(255,228,163,0) 190.03deg,rgba(255,228,163,calc(var(--raios)/100*0.209)) 193.74deg,rgba(255,228,163,calc(var(--raios)/100*0.698)) 196.78deg,rgba(255,228,163,calc(var(--raios)/100*0.209)) 199.81deg,rgba(255,228,163,0) 203.52deg,rgba(255,228,163,0) 207.96deg,rgba(255,228,163,calc(var(--raios)/100*0.155)) 210.03deg,rgba(255,228,163,calc(var(--raios)/100*0.515)) 211.73deg,rgba(255,228,163,calc(var(--raios)/100*0.155)) 213.42deg,rgba(255,228,163,0) 215.49deg,rgba(255,228,163,0) 237.13deg,rgba(255,228,163,calc(var(--raios)/100*0.275)) 238.12deg,rgba(255,228,163,calc(var(--raios)/100*0.917)) 238.92deg,rgba(255,228,163,calc(var(--raios)/100*0.275)) 239.72deg,rgba(255,228,163,0) 240.70deg,rgba(255,228,163,0) 252.87deg,rgba(255,228,163,calc(var(--raios)/100*0.268)) 256.01deg,rgba(255,228,163,calc(var(--raios)/100*0.894)) 258.57deg,rgba(255,228,163,calc(var(--raios)/100*0.268)) 261.14deg,rgba(255,228,163,0) 264.28deg,rgba(255,228,163,0) 360deg);filter:blur(calc(var(--dif)*0.6));animation:sb-raios-a calc(1700s / var(--ritmo)) ease-in-out infinite;animation-delay:-3s}html::after{background:conic-gradient(from 0deg at var(--sol-x) var(--sol-y),rgba(255,214,128,0) 0deg,rgba(255,214,128,0) 110.41deg,rgba(255,214,128,calc(var(--raios)/100*0.277)) 113.60deg,rgba(255,214,128,calc(var(--raios)/100*0.923)) 116.21deg,rgba(255,214,128,calc(var(--raios)/100*0.277)) 118.81deg,rgba(255,214,128,0) 122.00deg,rgba(255,214,128,0) 133.83deg,rgba(255,214,128,calc(var(--raios)/100*0.145)) 136.24deg,rgba(255,214,128,calc(var(--raios)/100*0.484)) 138.21deg,rgba(255,214,128,calc(var(--raios)/100*0.145)) 140.18deg,rgba(255,214,128,0) 142.58deg,rgba(255,214,128,0) 149.23deg,rgba(255,214,128,calc(var(--raios)/100*0.261)) 152.80deg,rgba(255,214,128,calc(var(--raios)/100*0.871)) 155.73deg,rgba(255,214,128,calc(var(--raios)/100*0.261)) 158.65deg,rgba(255,214,128,0) 162.23deg,rgba(255,214,128,0) 185.05deg,rgba(255,214,128,calc(var(--raios)/100*0.214)) 186.20deg,rgba(255,214,128,calc(var(--raios)/100*0.712)) 187.15deg,rgba(255,214,128,calc(var(--raios)/100*0.214)) 188.09deg,rgba(255,214,128,0) 189.25deg,rgba(255,214,128,0) 191.91deg,rgba(255,214,128,calc(var(--raios)/100*0.282)) 194.14deg,rgba(255,214,128,calc(var(--raios)/100*0.939)) 195.96deg,rgba(255,214,128,calc(var(--raios)/100*0.282)) 197.79deg,rgba(255,214,128,0) 200.02deg,rgba(255,214,128,0) 220.64deg,rgba(255,214,128,calc(var(--raios)/100*0.197)) 225.17deg,rgba(255,214,128,calc(var(--raios)/100*0.656)) 228.87deg,rgba(255,214,128,calc(var(--raios)/100*0.197)) 232.58deg,rgba(255,214,128,0) 237.11deg,rgba(255,214,128,0) 240.69deg,rgba(255,214,128,calc(var(--raios)/100*0.222)) 245.14deg,rgba(255,214,128,calc(var(--raios)/100*0.739)) 248.79deg,rgba(255,214,128,calc(var(--raios)/100*0.222)) 252.43deg,rgba(255,214,128,0) 256.89deg,rgba(255,214,128,0) 360deg);filter:blur(calc(var(--dif)*1.1));animation:sb-raios-b calc(2300s / var(--ritmo)) ease-in-out infinite;animation-delay:-11s}body::before{background:conic-gradient(from 0deg at var(--sol-x) var(--sol-y),rgba(255,240,205,0) 0deg,rgba(255,240,205,0) 109.75deg,rgba(255,240,205,calc(var(--raios)/100*0.170)) 113.29deg,rgba(255,240,205,calc(var(--raios)/100*0.568)) 116.18deg,rgba(255,240,205,calc(var(--raios)/100*0.170)) 119.08deg,rgba(255,240,205,0) 122.61deg,rgba(255,240,205,0) 142.92deg,rgba(255,240,205,calc(var(--raios)/100*0.214)) 146.53deg,rgba(255,240,205,calc(var(--raios)/100*0.714)) 149.48deg,rgba(255,240,205,calc(var(--raios)/100*0.214)) 152.43deg,rgba(255,240,205,0) 156.04deg,rgba(255,240,205,0) 163.06deg,rgba(255,240,205,calc(var(--raios)/100*0.200)) 166.06deg,rgba(255,240,205,calc(var(--raios)/100*0.667)) 168.52deg,rgba(255,240,205,calc(var(--raios)/100*0.200)) 170.97deg,rgba(255,240,205,0) 173.97deg,rgba(255,240,205,0) 199.21deg,rgba(255,240,205,calc(var(--raios)/100*0.257)) 201.05deg,rgba(255,240,205,calc(var(--raios)/100*0.858)) 202.56deg,rgba(255,240,205,calc(var(--raios)/100*0.257)) 204.07deg,rgba(255,240,205,0) 205.92deg,rgba(255,240,205,0) 218.12deg,rgba(255,240,205,calc(var(--raios)/100*0.238)) 221.89deg,rgba(255,240,205,calc(var(--raios)/100*0.792)) 224.98deg,rgba(255,240,205,calc(var(--raios)/100*0.238)) 228.06deg,rgba(255,240,205,0) 231.84deg,rgba(255,240,205,0) 235.45deg,rgba(255,240,205,calc(var(--raios)/100*0.148)) 240.36deg,rgba(255,240,205,calc(var(--raios)/100*0.494)) 244.37deg,rgba(255,240,205,calc(var(--raios)/100*0.148)) 248.39deg,rgba(255,240,205,0) 253.30deg,rgba(255,240,205,0) 360deg);filter:blur(calc(var(--dif)*1.7));animation:sb-raios-c calc(2900s / var(--ritmo)) ease-in-out infinite;animation-delay:-19s}body::after{background:conic-gradient(from 0deg at var(--sol-x) var(--sol-y),rgba(255,199,102,0) 0deg,rgba(255,199,102,0) 117.89deg,rgba(255,199,102,calc(var(--raios)/100*0.212)) 121.49deg,rgba(255,199,102,calc(var(--raios)/100*0.706)) 124.44deg,rgba(255,199,102,calc(var(--raios)/100*0.212)) 127.39deg,rgba(255,199,102,0) 130.99deg,rgba(255,199,102,0) 138.49deg,rgba(255,199,102,calc(var(--raios)/100*0.108)) 145.07deg,rgba(255,199,102,calc(var(--raios)/100*0.361)) 150.45deg,rgba(255,199,102,calc(var(--raios)/100*0.108)) 155.84deg,rgba(255,199,102,0) 162.42deg,rgba(255,199,102,0) 173.85deg,rgba(255,199,102,calc(var(--raios)/100*0.170)) 176.76deg,rgba(255,199,102,calc(var(--raios)/100*0.565)) 179.14deg,rgba(255,199,102,calc(var(--raios)/100*0.170)) 181.52deg,rgba(255,199,102,0) 184.43deg,rgba(255,199,102,0) 219.81deg,rgba(255,199,102,calc(var(--raios)/100*0.177)) 222.17deg,rgba(255,199,102,calc(var(--raios)/100*0.588)) 224.10deg,rgba(255,199,102,calc(var(--raios)/100*0.177)) 226.03deg,rgba(255,199,102,0) 228.39deg,rgba(255,199,102,0) 230.87deg,rgba(255,199,102,calc(var(--raios)/100*0.283)) 234.04deg,rgba(255,199,102,calc(var(--raios)/100*0.942)) 236.63deg,rgba(255,199,102,calc(var(--raios)/100*0.283)) 239.22deg,rgba(255,199,102,0) 242.39deg,rgba(255,199,102,0) 360deg);filter:blur(calc(var(--dif)*2.4));animation:sb-raios-d calc(3700s / var(--ritmo)) ease-in-out infinite;animation-delay:-7s}
@keyframes sb-raios-a{0%,100%{opacity:.10;transform:rotate(-1.1deg)}
34%{opacity:1;transform:rotate(.4deg)}
61%{opacity:.42;transform:rotate(1.1deg)}}
@keyframes sb-raios-b{0%,100%{opacity:.95;transform:rotate(1.4deg)}
28%{opacity:.06;transform:rotate(.1deg)}
72%{opacity:.70;transform:rotate(-1.4deg)}}
@keyframes sb-raios-c{0%,100%{opacity:.05;transform:rotate(1.8deg)}
45%{opacity:.95;transform:rotate(-.7deg)}
68%{opacity:.20;transform:rotate(-1.6deg)}}
@keyframes sb-raios-d{0%,100%{opacity:.85;transform:rotate(-2.2deg)}
39%{opacity:.04;transform:rotate(.6deg)}
77%{opacity:.55;transform:rotate(2.0deg)}}

/* `fixed` COMO A CENA. Enquanto o fundo vivia no `html` ele rolava com o
   documento e este contentor tinha de rolar tambem; com a cena colada ao
   ecra, os dois passam a partilhar a mesma caixa, que e o ecra, e a conta do
   `cover` deixa de depender da altura da pagina. */
#brilhos{position:fixed;inset:0;pointer-events:none;
z-index:1;overflow:hidden;
--quantos:var(--brilhos);--intervalo:var(--cada);--dobra:var(--duplos)}
/* O `--m` TEM VALOR AQUI e o JavaScript escreve por cima dele a cada
   acendimento. Sem esta linha ele era uma variavel usada e nunca declarada:
   se o guiao nao correr, o `calc()` fica invalido e o brilho passa a nao ter
   TAMANHO NENHUM, em silencio. Foi a bateria que o apanhou, na conferencia
   que olha para o lado que ninguem olha: as variaveis USADAS contra as
   DECLARADAS. */
/* O `isolation` CONTEM A MISTURA. Sem ele, o `mix-blend-mode:screen` de cada
   brilho mistura-se com TUDO o que esta por baixo no mesmo contexto, e no
   telemovel isso obriga o browser a repintar a pagina inteira a cada
   centelha: o Paulo viu a pagina toda a piscar. Com o `isolate`, o `screen`
   passa a valer so dentro deste contentor.
   NAO POSSO MEDIR ISTO AQUI: nao ha telemovel nesta maquina, e a cura
   verifica-se no ecra dele. */
#brilhos{isolation:isolate}
.brilho{position:absolute;--m:1;will-change:opacity,transform;
width:calc(var(--base) * var(--m));height:calc(var(--base) * var(--m));
margin:calc(var(--base) * var(--m) / -2) 0 0 calc(var(--base) * var(--m) / -2);
border-radius:50%;opacity:0;mix-blend-mode:screen;transform:scale(.35);
background:radial-gradient(circle,rgba(255,252,236,.95) 0%,
 rgba(255,226,150,.55) 30%,rgba(255,196,80,.18) 55%,transparent 72%)}
/* UMA CENTELHA PULSA UMA VEZ, e as que pulsam duas sao sorteadas a cada
   acendimento. Com o segundo pico dentro da propria curva, TODAS pulsavam
   duas e liam-se como um mecanismo. */
.brilho.uma{animation:sb-centelha-1 var(--flash) ease-out 1}
.brilho.duas{animation:sb-centelha-2 var(--flash) ease-in-out 1}
@keyframes sb-centelha-1{0%{opacity:0;transform:scale(.35)}
22%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.5)}}
/* A segunda e mais fraca e mais curta: duas iguais leem-se como luz avariada;
   uma forte seguida de um resto e o que uma faceta dourada faz quando a
   cabeca de quem olha se mexe um bocadinho. */
@keyframes sb-centelha-2{0%{opacity:0;transform:scale(.35)}
16%{opacity:1;transform:scale(1)}38%{opacity:.12;transform:scale(.7)}
58%{opacity:.72;transform:scale(.92)}100%{opacity:0;transform:scale(.45)}}
/* E NO TELEMOVEL A MISTURA SAI DE VEZ. O `isolate` acima chega na maioria dos
   casos; num ecra pequeno, com a placa a fazer tambem o `blur` das quatro
   camadas de raios, o custo do `screen` continua a poder pagar-se em pagina
   inteira. Sem ele os brilhos ficam um nada mais lavados e nao piscam nada. */
@media (max-width:820px){
.brilho{mix-blend-mode:normal;opacity:0}
}
/* QUEM DESLIGOU ANIMACOES FICA COM A CENA QUIETA, e nao sem ela. */
@media (prefers-reduced-motion:reduce){
html::before,html::after,body::before,body::after,
.brilho,.brilho.uma,.brilho.duas{animation:none !important}
.brilho{opacity:.45;transform:scale(.9)}}

/* CINCO COLUNAS IGUAIS, e e a fila da chegada da v154. Ela tem DUAS filas de
   cartoes e elas sao o ANTES e o DEPOIS da mesma pasta: para se comparar tem
   de se ler em coluna, o `ficheiros na pasta` de cima por cima do de baixo.
   A `.grelha` simples reparte por conteudo e nao alinhava nada; a
   `.grelha.igual` reparte por seis e deixava a sexta vazia nas duas. */
/* QUATRO COLUNAS IGUAIS, para a fila da analise da depuracao ocupar a
   largura da moldura. Ate a v157 essa fila levava `class="grelha quatro"` e
   a classe NAO EXISTIA: caia na `.grelha` simples, que e `flex` com
   `max-width:220px` no cartao, e as quatro caixas encostavam-se a esquerda
   com o resto da linha vazio. Uma classe que nao existe nao da erro
   nenhum, e por isso isto so se ve no ecra.
   Mesma receita da .grelha.cinco, com uma coluna a menos. */
/* TRES COLUNAS IGUAIS, para a fila dos destinos do simular. Mesma
   historia da `.grelha.quatro`: a fila levava `grelha cinco` com tres
   cartoes dentro e ficava encolhida a esquerda, com duas colunas vazias.
   Ela e a `.moldura .grelha.tres` sao regras diferentes de proposito: a
   outra so vale dentro de uma moldura, e este painel nao e uma. */
.grelha.tres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px}
.grelha.tres .cartao{max-width:none;flex:none;min-width:0}
@media (max-width:520px){
.grelha.tres{grid-template-columns:repeat(1,minmax(0,1fr))}}
.grelha.quatro{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
gap:12px}
.grelha.quatro .cartao{max-width:none;flex:none;min-width:0}
@media (max-width:860px){
.grelha.quatro{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){
.grelha.quatro{grid-template-columns:repeat(2,minmax(0,1fr))}}
.grelha.cinco{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
gap:12px}
.grelha.cinco .cartao{max-width:none;flex:none;min-width:0}
@media (max-width:860px){
.grelha.cinco{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:520px){
.grelha.cinco{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* SEIS COLUNAS IGUAIS, para a fila de naturezas da depuracao ganhar a
   caixa "pdf imagens" na v155 sem quebrar a linha. Mesma receita da
   .grelha.cinco, so com uma coluna a mais. */
.grelha.seis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
gap:12px}
.grelha.seis .cartao{max-width:none;flex:none;min-width:0}
@media (max-width:860px){
.grelha.seis{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:520px){
.grelha.seis{grid-template-columns:repeat(2,minmax(0,1fr))}}
main{position:relative;z-index:2;max-width:var(--largura);margin:0 auto;
padding:18px 16px 64px}
/* AS LIGACOES DO CORPO. Sem esta regra ficam com o AZUL por omissao do
   browser, e sobre uma fotografia dourada le-se como um erro. Foi visto no
   ecra: a folha estilizava `a` dentro da barra e mais lado nenhum, e a
   bateria nao o apanhou porque mede marcacao e nao cor. */
main a{color:var(--fraco);text-decoration:none;
border-bottom:1px solid transparent}
main a:hover{color:var(--aceso);border-bottom-color:var(--aceso)}
main a.activo{color:var(--aceso);border-bottom-color:var(--aceso)}
main a:visited{color:var(--fraco)}
.cartao,.caixa,.painel,table{
background:color-mix(in srgb,var(--caixa) calc(var(--caixas)*1%),transparent);
border:1px solid var(--linha);border-radius:10px}
button,.btn,input[type=submit]{font:inherit;text-transform:inherit;
letter-spacing:inherit;background:var(--caixa);color:var(--texto);
border:1px solid var(--linha);border-radius:8px;padding:10px 18px;
cursor:pointer}
button:hover,.btn:hover{border-color:var(--aceso)}
table{width:100%;border-collapse:separate;border-spacing:0;overflow:hidden;
margin:12px 0}
th,td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--linha);
font-size:12px}
th{font-size:10px;letter-spacing:.16em;color:var(--fraco)}
tr:last-child td{border-bottom:0}
td.obra{font-size:13px;color:var(--texto)}
td .aut{display:block;font-size:11px;color:var(--fraco)}
.grelha{display:flex;flex-wrap:wrap;gap:12px;margin:14px 0}
.cartao{flex:1 1 160px;max-width:220px;padding:14px 16px;border-style:dashed}
/* O NUMERO E O CONTEUDO DO CARTAO e a etiqueta e a legenda, e ate aqui os
   dois estavam quase do mesmo tamanho. Visto no ecra. */
.cartao .n{font-size:30px;letter-spacing:.02em;color:var(--aceso);
display:block;line-height:1.1}
.cartao .r{font-size:11px;color:var(--fraco);letter-spacing:.12em}
/* O cartao que manda fazer alguma coisa distingue-se pelo contorno cheio. */
.cartao.chama{border-style:solid;border-color:var(--aceso)}
.cartao.chama .n{color:var(--aceso)}
/* A GRELHA IGUAL, das seis naturezas da chegada. Nasceu na v148 e a
   razao viu-se no ecra: com o tecto de 220px por cartao as seis nao
   cabiam numa linha e a sexta caia sozinha para baixo, o que a fazia
   parecer de outra especie. Aqui as seis tem a MESMA largura e a soma
   delas e a linha inteira, que e o que uma reparticao deve parecer.
   Um setimo cartao, o do formato desconhecido, desce para a linha
   seguinte de proposito: ele e uma anomalia e tem de dar nas vistas. */
.grelha.igual{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
gap:12px}
.grelha.igual .cartao{max-width:none;flex:none;min-width:0}
/* E MAIS BAIXAS, POR PEDIDO DO PAULO NA v150. So as do grupo 2: a `.grelha`
   simples, que e a da PASTA E A BASE, fica como estava, porque nao foi dela
   que ele se queixou.
   O QUE FAZ A ALTURA DE UMA CAIXA sao tres coisas, e sao estas as tres que
   aqui descem: a folga de cima e de baixo, o corpo do numero, e o corpo da
   etiqueta. A etiqueta desce tambem por uma segunda razao: e ela que ganha
   a folga que faz `PDF E ESPERA` caber numa fila, agora que ela passou a
   ser a mais comprida das seis. */
.grelha.igual .cartao{padding:7px 10px}
.grelha.igual .cartao .n{font-size:21px;line-height:1.05}
.grelha.igual .cartao .r{font-size:10px;letter-spacing:.08em}
/* A SETIMA CELULA E UM BOTAO e nao um cartao. Fica na propria grelha para
   nao haver largura nenhuma que o possa empurrar para a linha de baixo, e
   estica-se a celula toda para a linha ficar direita. */
.grelha.igual.com-extra{grid-template-columns:repeat(7,minmax(0,1fr))}
.grelha .celula-botao,.grelha .celula-botao form{display:flex;width:100%}
.grelha .celula-botao button{width:100%;height:100%;white-space:normal;
line-height:1.3}
@media (max-width:860px){
.grelha.igual{grid-template-columns:repeat(3,minmax(0,1fr))}
.grelha.igual.com-extra{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:520px){
.grelha.igual{grid-template-columns:repeat(2,minmax(0,1fr))}
.grelha.igual.com-extra{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* UM CAMINHO NUNCA VAI EM MAIUSCULAS, pela mesma razao de um nome de
   ficheiro: mostrado de outra maneira, deixa de ser o caminho. Ate aqui ele
   herdava o `uppercase` do corpo e saia `/MNT/EBOOKS/...`. */
p.nota{margin:6px 0 0;font-family:ui-monospace,Menlo,Consolas,monospace;
font-size:10px;text-transform:none;letter-spacing:0;color:var(--fraco);
opacity:.75}
.painel{padding:16px 18px;margin:14px 0}
/* A CAIXA DOS RESULTADOS DA CORRIDA. As maiusculas e o corpo maior foram
   pedidos pelo Paulo, e vao para os NUMEROS e para a linha das classes.
   Precisam de mais peso do que a regra geral porque o `.mono` da casa traz
   `text-transform:none`, e por isso os selectores levam o `#relatorio`.
   A LISTA DAS RAZOES FICA DE FORA de proposito: sao nomes de ficheiros, e
   um nome de ficheiro em maiusculas deixa de ser o nome do ficheiro. */
#relatorio{display:flex;align-items:center;justify-content:space-between;
gap:18px;padding:10px 16px}
#relatorio .rel-conta{flex:1 1 auto;min-width:0}
#relatorio .rel-conta p{margin:3px 0}
#relatorio .rel-botoes{flex:0 0 auto;display:flex;align-items:center;gap:10px}
/* OS NUMEROS DA CORRIDA, cada um na sua moldura e todos numa linha so.
   Usam o `n` e o `r` dos cartoes do inventario de proposito: e a mesma
   pergunta com a mesma cara, e nao um segundo desenho para a mesma coisa.
   Sao mais pequenos porque sao oito e nao seis, e porque partilham a linha
   com os dois botoes. Se um dia nao couberem, a tira desliza na horizontal
   em vez de dobrar: dobrada, a caixa cresce em altura e foi disso que o
   Paulo se queixou. */
#relatorio .rel-numeros{display:flex;flex-wrap:nowrap;gap:6px;margin:3px 0;
overflow-x:auto}
#relatorio .rel-num{flex:0 0 auto;padding:4px 9px;text-align:center;
min-width:54px;border:1px dashed var(--linha);border-radius:8px}
#relatorio .rel-num .n{display:block;font-size:15px;color:var(--aceso);
letter-spacing:.02em;font-family:ui-monospace,Menlo,Consolas,monospace}
#relatorio .rel-num .r{display:block;margin-top:2px;font-size:8px;
color:var(--fraco);letter-spacing:.10em;text-transform:uppercase}
/* OS DOIS BOTOES COM A MESMA ALTURA. Um e um `a` e o outro um `button`, e a
   altura deles vinha do texto de cada um; postos lado a lado, a diferenca
   via-se. */
#relatorio .rel-botoes .btn,#relatorio .rel-botoes button{height:36px;
display:inline-flex;align-items:center;justify-content:center;padding:0 16px;
font-size:11px;letter-spacing:.14em}
#relatorio .mono{text-transform:uppercase;font-size:14px;letter-spacing:.08em}
#relatorio p.nota{text-transform:uppercase;font-size:12px;letter-spacing:.06em}
#relatorio p.falhou{font-size:13px}
#relatorio .btn{display:inline-block;padding:6px 14px;font-size:11px;
letter-spacing:.14em;text-decoration:none;white-space:nowrap}
#relatorio .rel-botoes button{white-space:nowrap}
.grelha.igual{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
gap:12px}
.grelha.igual .cartao{max-width:none;flex:none;min-width:0}
/* A SETIMA CELULA E UM BOTAO e nao um cartao. Fica na propria grelha para
   nao haver largura nenhuma que o possa empurrar para a linha de baixo, e
   estica-se a celula toda para a linha ficar direita. */
.grelha.igual.com-extra{grid-template-columns:repeat(7,minmax(0,1fr))}
.grelha .celula-botao,.grelha .celula-botao form{display:flex;width:100%}
.grelha .celula-botao button{width:100%;height:100%;white-space:normal;
line-height:1.3}
@media (max-width:860px){
.grelha.igual{grid-template-columns:repeat(3,minmax(0,1fr))}
.grelha.igual.com-extra{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:520px){
.grelha.igual{grid-template-columns:repeat(2,minmax(0,1fr))}
.grelha.igual.com-extra{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* AS CAPAS DAS PAGINAS DE CASOS. A pequena na lista e a grande no caso
   aberto. O `lugar vazio` existe porque sem ele as duas colunas ficavam
   desalinhadas quando um dos lados nao tem capa, e o olho perde o par. */
.capinha{display:block;width:56px;height:80px;object-fit:cover;
border-radius:4px;margin-bottom:6px}
/* 220 POR 330, e nao 180 por 260: o Paulo viu que havia espaco e as capas
   sao para se verem. A proporcao e a mesma de uma capa de livro, dois por
   tres, e por isso o `object-fit: cover` quase nao corta nada. */
.capa-grande{display:block;width:220px;height:330px;object-fit:cover;
border-radius:6px;margin-bottom:10px}
.capinha.vazia,.capa-grande.vazia{display:flex;align-items:center;
justify-content:center;border:1px dashed var(--linha);font-size:9px;
color:var(--fraco);letter-spacing:.08em}
td.lado .obra{display:block;font-size:13px;color:var(--texto)}
/* O SELO DIZ O QUE ESTE LADO E DENTRO DO CASO. Foi o Paulo a perguntar:
   na lixeira via dois livros lado a lado e nada dizia qual ia fora. Le-se
   em maiusculas e com espaco entre as letras porque e uma etiqueta e nao
   uma frase, e nao compete com o titulo do livro que esta por baixo. */
p.selo{margin:0 0 6px;font-family:ui-monospace,Menlo,Consolas,monospace;
       font-size:11px;letter-spacing:.10em;text-transform:uppercase;
       color:var(--fraco);border-bottom:1px solid var(--linha);
       padding-bottom:4px}
.dois-lados{display:flex;gap:24px;flex-wrap:wrap;margin:12px 0}
.dois-lados .lado{flex:1 1 220px}
.dois-lados .lado .obra{display:block;font-size:14px;color:var(--texto)}
.caso .rel-botoes{margin-top:16px;justify-content:flex-start}
/* A CAPA A ESQUERDA E A FICHA A DIREITA, dentro de cada lado do caso. Foi o
   Paulo a pedir a informacao `listada ao lado direito de cada livro`. */
.capa-e-ficha{display:flex;gap:14px;align-items:flex-start}
.capa-e-ficha .ficha{flex:1 1 auto;min-width:0}
.capa-e-ficha dl{margin:8px 0 12px;display:grid;
grid-template-columns:auto 1fr;gap:2px 10px}
.capa-e-ficha dt{font-size:9px;letter-spacing:.14em;color:var(--fraco);
text-transform:uppercase;align-self:center}
.capa-e-ficha dd{margin:0;font-size:12px;color:var(--texto);
overflow-wrap:anywhere}
.capa-e-ficha dd .aut{display:inline;font-size:10px;margin-left:6px}
.capa-e-ficha .btn{display:inline-block;padding:7px 14px;font-size:10px}
/* AS CAIXAS DE TEXTO DA FICHA. Sao caixas e nao texto porque o Paulo abre o
   livro e corrige o que la vir; mas nao gritam, porque a maior parte das
   vezes ele so as le. */
.capa-e-ficha input[type=text],.capa-e-ficha select{box-sizing:border-box}
.capa-e-ficha select{max-width:100%;font:inherit;font-size:11px;
background:var(--caixa);color:var(--texto);border:1px solid var(--linha);
border-radius:6px;padding:3px 6px;margin-top:2px}
.capa-e-ficha input[type=text]{width:100%;background:transparent;
color:var(--texto);border:1px solid transparent;border-bottom-color:
var(--linha);border-radius:0;padding:2px 4px;font:inherit;font-size:12px}
.capa-e-ficha input[type=text]:hover{border-color:var(--linha)}
.capa-e-ficha input[type=text]:focus{outline:none;border-color:var(--aceso);
background:rgba(0,0,0,.25)}
.capa-e-ficha input.titulo{font-size:14px;margin-bottom:4px}
.btn.guardar{border-color:var(--aceso)}
.caso p.nota{margin:10px 0 0}
/* A CAIXA QUE ABRE UMA PAGINA distingue-se por ser carregavel, e mais nada:
   o numero e o rotulo ficam iguais aos das outras. */
a.rel-num.abre{text-decoration:none;border-color:var(--aceso)}
a.rel-num.abre:hover{background:var(--caixa)}
/* O `I` DA LEGENDA, redondo e do tamanho de uma letra, e UM POR CAMADA DE
   CAIXAS. Ate a v149 havia um so, agarrado a caixa do relatorio, e ele abria
   os cinco blocos: quem estava a ver os cartoes da chegada tinha de procurar
   o bloco deles no meio de outros quatro que falam do que nem esta no ecra.
   A letra e um I maiusculo, de informacao, e por isso deixou de ser italico:
   um I inclinado le-se como uma risca. */
.rel-i{flex:0 0 auto;width:26px;height:26px;padding:0;
border-radius:50%;font-size:13px;line-height:1;display:inline-flex;
align-items:center;justify-content:center;letter-spacing:0}
/* NO TITULO de uma camada que tenha titulo, a seguir as palavras. */
h2 .rel-i{margin-left:12px;vertical-align:middle;width:22px;height:22px;
font-size:11px}
/* E DENTRO DA PROPRIA FILA, na camada que nao tem titulo nenhum. */
.grelha>.rel-i{align-self:center}
/* A LEGENDA. Um `dialog` e nao uma caixa escondida com JavaScript a fingir
   de janela: o browser trata do fundo escurecido, do fecho pelo Escape e de
   nao se poder carregar no que esta por baixo. */
.legenda{max-width:660px;width:calc(100% - 32px);color:inherit;
background:rgba(6,4,2,.97);border:1px solid var(--linha);border-radius:10px;
padding:20px 24px}
.legenda::backdrop{background:rgba(0,0,0,.66)}
.legenda h3{margin:18px 0 6px;font-size:11px;letter-spacing:.16em;
color:var(--aceso)}
.legenda h3:first-child{margin-top:0}
.legenda dl{margin:0}
.legenda dt{margin-top:9px;font-size:12px;letter-spacing:.04em;
color:var(--aceso);font-family:ui-monospace,Menlo,Consolas,monospace}
.legenda dd{margin:2px 0 0;font-size:12px;line-height:1.5}
.legenda p.regra{margin:10px 0 0;font-size:11px;line-height:1.5;
font-style:italic;color:var(--fraco)}
.legenda .fechar-legenda{margin-top:18px}
/* O TELEMOVEL. A caixa dos resultados e uma linha com duas metades, e numa
   largura de telemovel as duas metades nao cabem lado a lado: os numeros
   ficam espremidos e os botoes saem do ecra. Empilham-se, os numeros
   deslizam na horizontal, e os dois botoes repartem a largura. O corte a
   860 e a 520 e o mesmo dos cartoes do inventario, de proposito: dois
   cortes diferentes na mesma pagina fazem a pagina partir aos bocados em
   larguras diferentes. */
@media (max-width:860px){
#relatorio{flex-direction:column;align-items:stretch;gap:10px;padding:12px 14px}
#relatorio .rel-botoes{justify-content:flex-end}
#relatorio .rel-numeros{padding-bottom:4px}
}
@media (max-width:520px){
#relatorio .rel-num{min-width:46px;padding:3px 6px}
#relatorio .rel-num .n{font-size:13px}
#relatorio .rel-num .r{font-size:7px;letter-spacing:.06em}
#relatorio .rel-botoes{gap:8px}
#relatorio .rel-botoes .btn,#relatorio .rel-botoes button{flex:1 1 0;
padding:0 8px;font-size:10px;letter-spacing:.08em}
#log-da-corrida pre{font-size:12px}
.legenda{padding:16px 16px}
.legenda dd,.legenda dt{font-size:11px}
}
/* A PAGINA DO LOG. Estava a usar a nota de 11 pixeis da casa, que serve para
   um rodape e nao para um registo que se le de fio a pavio. O `pre` quebra
   linha porque um caminho de ficheiro dentro de uma caixa e comprido, e uma
   barra horizontal para o ler seria pior do que a letra pequena. */
#log-da-corrida{padding:16px 20px}
#log-da-corrida p.nota{font-size:13px;letter-spacing:.04em;margin:0 0 10px}
#log-da-corrida pre{font-size:13px;line-height:1.55;margin:0;
white-space:pre-wrap;word-break:break-word}
.trabalho-topo{display:flex;justify-content:space-between;align-items:center;
gap:12px;font-size:11px;margin-bottom:8px}
/* A BARRA TEM ALTURA FIXA E O DE DENTRO CRESCE. Uma barra que so aparece
   quando ha progresso salta a pagina de cada vez que muda. */
.barra-fora{height:10px;border-radius:6px;background:#000;
border:1px solid var(--linha);overflow:hidden}
.barra-dentro{height:100%;width:0;background:var(--aceso);
transition:width .4s linear}
/* O RODAPE DA BARRA TEM DOIS LADOS, por ordem dele: a esquerda ha quanto
   tempo isto corre, a direita a hora a que acaba. Sao duas leituras
   diferentes e nao duas maneiras de dizer a mesma: uma responde a `vai
   demorar?` e a outra a `posso ir jantar?`.
   O DA DIREITA ENCOSTA-SE A DIREITA e nao ao meio: encostado, ele fica
   sempre na mesma coluna do ecra e le-se de relance sem procurar. */
.trabalho-fundo{display:flex;justify-content:space-between;
align-items:baseline;gap:14px}
.trabalho-fundo p{margin:6px 0 0}
#tr-fim{text-align:right;white-space:nowrap}
button[disabled]{opacity:.45;cursor:default}
button[disabled]:hover{border-color:var(--linha)}
/* O MAPA DO PERCURSO. As cores vivem AQUI e nao no SVG: um valor de cor
   escrito dentro do grafico era uma paleta a mais, e a bateria dele nao
   deixa passar um unico `#`.
   As faixas sao `screen` para se verem umas as outras quando se cruzam, e o
   `p-ff`, que e a familia dos desfechos, leva o tom do `nota` porque um
   desfecho nao e um erro nem uma passagem: e uma saida. */
svg.percurso{display:block;width:100%;height:auto;margin:8px 0 4px}
.p-via{fill:var(--aceso);fill-opacity:.85}
.p-fim{fill:var(--nota);fill-opacity:.9}
/* AS FAIXAS SAO DISCRETAS E NAO SE MISTURAM. A primeira versao tinha-as a
   `screen` com 16%, e sobre a fotografia dourada isso lavava a pagina
   inteira: o que se via era um borrao claro com riscas dentro. Sem mistura e
   com menos alfa, leem-se como sombra e nao como luz. */
.p-f{fill:var(--aceso);fill-opacity:.09}
.p-ff{fill:var(--nota);fill-opacity:.12}
.p-n{fill:var(--texto);font-size:12px;font-family:ui-monospace,Menlo,
Consolas,monospace;letter-spacing:0}
.p-r{fill:var(--texto);font-size:9px;letter-spacing:.14em;
text-transform:uppercase}
.p-e{fill:var(--fraco);font-size:9px;letter-spacing:.02em}
.p-p{fill:var(--fraco);font-size:9px;letter-spacing:.16em;
text-transform:uppercase;opacity:.7}
.selo{display:inline-block;padding:1px 8px;border-radius:20px;font-size:10px;
letter-spacing:.10em;border:1px solid currentColor}
.selo.novo{color:var(--ok)}.selo.dup{color:var(--alerta)}
.selo.duv{color:var(--nota)}.selo.conv{color:var(--fraco)}

#asp-abrir{position:fixed;right:12px;bottom:12px;z-index:9;width:34px;
height:34px;padding:0;font-size:16px;line-height:1;border-radius:50%;
background:rgba(6,4,2,.9);color:var(--aceso);border:1px solid var(--linha)}
#asp{position:fixed;right:12px;bottom:56px;z-index:9;width:280px;
max-width:calc(100vw - 24px);max-height:calc(100vh - 90px);overflow:auto;
display:none;background:rgba(6,4,2,.95);border:1px solid var(--linha);
border-radius:10px;padding:12px 14px;font-size:10px;letter-spacing:.10em}
#asp.aberto{display:block}
#asp h3{margin:0 0 8px;font-size:10px;letter-spacing:.18em;font-weight:400;
color:var(--aceso)}
#asp h3+label{margin-top:2px}
#asp label{display:block;margin:9px 0 2px;color:var(--fraco)}
#asp input[type=range]{width:100%;accent-color:#d8a94a}
#asp .asp-v{float:right;color:var(--texto);font-family:ui-monospace,monospace;
letter-spacing:0;text-transform:none}
#asp-fechar{position:absolute;top:6px;right:9px;color:var(--fraco);
cursor:pointer;font-size:14px;line-height:1}
#asp-linha{margin-top:10px;padding:7px 8px;background:#000;
border:1px solid var(--linha);border-radius:6px;
font-family:ui-monospace,monospace;font-size:10px;letter-spacing:0;
text-transform:none;color:var(--aceso);word-break:break-all}
.asp-botoes{margin-top:8px;display:flex;gap:6px}
.asp-botoes button{padding:5px 10px;font-size:10px}
/* A FAIXA DO FICHEIRO ESTRAGADO. Uma guarda que se cala quando nao consegue
   trabalhar nao e uma guarda, e esta nao pode recusar a pagina: se ela
   recusasse, uma virgula a mais no `aspecto.json` trancava o Paulo fora da
   aplicacao. Diz alto e deixa entrar. */
.aviso-aspecto{position:relative;z-index:4;margin:0;padding:8px 16px;
background:var(--nota);color:#000;font-size:11px;letter-spacing:.08em}

:root{--barra-alta:42px}
body:has(.est-quadro){overflow:hidden}
main:has(.est-quadro){display:flex;flex-direction:column;
height:calc(100dvh - var(--barra-alta));box-sizing:border-box;
padding-top:10px;padding-bottom:8px;overflow:hidden}
main:has(.est-quadro)>h1{flex:0 0 auto;margin:0 0 8px;font-size:19px}

/* A BARRA DE CIMA, QUE DOBRA */
.est-topo{flex:0 0 auto;position:sticky;top:0;z-index:4;padding:9px 13px;
margin:0 0 9px;
background:color-mix(in srgb,var(--caixa) calc(var(--caixas)*1%),transparent);
border:1px solid var(--linha);border-radius:10px}
.eb-abre>summary{list-style:none;cursor:pointer;display:flex;flex-wrap:wrap;
gap:4px 12px;align-items:baseline;font-size:9px;letter-spacing:.16em;
color:var(--fraco)}
.eb-abre>summary::-webkit-details-marker{display:none}
.eb-abre>summary::before{content:"\2013 ";color:var(--aceso)}
.eb-abre:not([open])>summary::before{content:"+ ";color:var(--aceso)}
.eb-abre>summary:hover{color:var(--aceso)}
.eb-titulo{color:var(--aceso)}
.eb-resumo{text-transform:none;letter-spacing:0;font-size:11px;opacity:.8}
.eb-abre[open]>summary{margin-bottom:9px;padding-bottom:7px;
border-bottom:1px solid var(--linha)}
.eb-linha{display:flex;flex-wrap:wrap;align-items:center;gap:7px}
/* A BARRA NAO SAI DO ECRA. Ver o `costura_a_barra_cabe_no_telemovel.py`:
   o par da ORDEM media 360px e o sitio dele num telemovel de 390 tem 330. */
.eb-par{display:flex;align-items:center;gap:6px;min-width:0;max-width:100%}
.eb-linha select{min-width:0;max-width:100%}
.eb-par select[name="ordem"]{flex:1 1 80px}
.eb-par select[name="sentido"]{flex:0 0 auto}
.eb-par>label{font-size:9px;letter-spacing:.14em;color:var(--fraco)}
.eb-busca{flex:1 1 170px;min-width:120px}
.est-topo input[type=text],.est-topo input[type=search],
.est-topo input[type=number],.est-topo input[type=date],.est-topo select{
font:inherit;font-size:11px;background:rgba(0,0,0,.32);color:var(--texto);
border:1px solid var(--linha);border-radius:8px;padding:6px 9px;
box-sizing:border-box;max-width:100%}
.est-topo select{letter-spacing:.10em;background:var(--caixa)}
.est-topo input:focus,.est-topo select:focus{outline:none;
border-color:var(--aceso)}
.est-topo .btn,.est-topo button{padding:6px 14px;font-size:10px;
letter-spacing:.14em;text-decoration:none;white-space:nowrap}
.eb-mais{margin-top:9px;border-top:1px solid var(--linha);padding-top:8px}
.eb-mais summary{font-size:9px;letter-spacing:.16em;color:var(--fraco);
cursor:pointer;list-style:none}
.eb-mais summary::-webkit-details-marker{display:none}
.eb-mais summary::before{content:"+ ";color:var(--aceso)}
.eb-mais[open] summary::before{content:"\2013 "}
.eb-mais summary:hover{color:var(--aceso)}
.eb-grelha{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
gap:7px 12px;margin-top:9px}
.eb-campo{display:flex;flex-direction:column;gap:3px;min-width:0}
.eb-campo>label{font-size:9px;letter-spacing:.14em;color:var(--fraco)}
/* O DIA E A HORA LADO A LADO DENTRO DE UM CAMPO SO. O `.eb-campo` empilha em
   coluna, e sem esta regra a caixa da hora ia parar debaixo da do dia e a
   linha inteira da grelha crescia. A hora leva largura fixa porque o que ela
   mostra tem sempre o mesmo tamanho. */
.eb-quando{display:flex;gap:5px;min-width:0}
.eb-quando input[type="date"]{flex:1 1 auto;min-width:0}
.eb-quando input[type="time"]{flex:0 0 auto;width:74px}
.eb-marcas{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px;
align-items:center}
.eb-marca{display:inline-flex;align-items:center;gap:6px;font-size:10px;
letter-spacing:.10em;color:var(--fraco);cursor:pointer}
.eb-marca input{accent-color:#d8b268;width:14px;height:14px;margin:0}
.eb-so-marca{flex-direction:row;align-items:center;gap:8px}
/* O ADORMECIDO FICA, E JA NAO E O TEMA. Ele abriu na v153 e deixou de
   passar por aqui; a regra continua a servir o campo SEGUINTE que ele peca
   antes de existir, que foi exactamente como o tema nasceu. Uma opcao que
   falta e uma pergunta; uma opcao adormecida e uma resposta. */
.eb-adormecido{opacity:.5}
.eb-adormecido>label{text-decoration:line-through}

.est-quadro{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;
margin:0}
.est-accoes{flex:0 0 auto;display:flex;flex-wrap:wrap;align-items:center;
gap:10px;padding:7px 12px;margin-bottom:9px;
background:color-mix(in srgb,var(--caixa) calc(var(--caixas)*1%),transparent);
border:1px solid var(--linha);border-radius:10px}
.est-accoes .btn,.est-accoes button{padding:6px 13px;font-size:10px;
letter-spacing:.14em}
.eb-conta{font-size:10px;letter-spacing:.12em;color:var(--fraco)}
.eb-conta b{color:var(--aceso);font-size:13px}
.est-accoes .btn.guardar{margin-left:auto}

/* A MOLDURA QUE ROLA, E E A UNICA COISA QUE ROLA NESTA PAGINA.
   A ESTANTE VEM INTEIRA e nao ha paginas: a lista tem os 2177 cartoes e o
   abecedario da direita salta para dentro dela por ancora. */
.est-corpo{flex:1 1 auto;display:flex;min-height:0;gap:6px}
/* O SALTO E INSTANTANEO E NAO DESLIZADO, e isto mediu-se antes de se
   escolher: com `scroll-behavior:smooth`, um salto do `A` para o `Z` atravessa
   120 mil pixeis e o alvo MEXE-SE pelo caminho, porque o browser vai
   descobrindo a altura verdadeira dos cartoes que nunca desenhou. Ao fim de
   quatro segundos ainda nao tinha assentado. Um indice salta; nao viaja. */
.est-lista{flex:1 1 auto;min-height:0;min-width:0;overflow-y:auto;
overflow-x:hidden;padding:1px 8px 4px 1px;scrollbar-width:thin;
scroll-padding-top:6px;scrollbar-color:var(--linha) transparent}
.est-lista::-webkit-scrollbar{width:9px}
.est-lista::-webkit-scrollbar-thumb{background:var(--linha);border-radius:9px}
/* O ABECEDARIO E VERTICAL E FICA A DIREITA DAS IMAGENS. Ordem dele, e a
   razao esta na queixa que a trouxe: `ha um problema com a letra Q e X`.
   Nao havia problema nenhum, o Q e o X estao mesmo vazios nos autores; o
   que havia era uma tira DEITADA onde uma letra apagada se lia como um
   BURACO. De pe, com as linhas todas do mesmo tamanho, um vazio le-se como
   um vazio.
   AS 26 LETRAS APARECEM SEMPRE, e reparte-se a altura por elas: assim a
   posicao de cada letra na coluna nao muda com o filtro, e a mao dele vai
   sempre ao mesmo sitio. */
/* O `padding-bottom` E O BOTAO DO PAINEL. Visto no ecra: o botao redondo do
   aspecto e `fixed` no canto de baixo a direita e tapava o `Y` e o `Z`. */
.abc-v{flex:0 0 26px;display:flex;flex-direction:column;
justify-content:space-between;padding:3px 0 36px;margin:0;
background:color-mix(in srgb,var(--caixa) calc(var(--caixas)*1%),transparent);
border:1px solid var(--linha);border-radius:9px}
.abc-v .l{display:flex;align-items:center;justify-content:center;
flex:1 1 0;min-height:0;font-size:10px;line-height:1;letter-spacing:0;
color:var(--fraco);text-decoration:none;border:0;border-radius:5px;
margin:0 2px}
.abc-v a.l{color:var(--texto)}
.abc-v a.l:hover{background:var(--caixa);color:var(--aceso);border-bottom:0}
.abc-v a.l.aqui{background:color-mix(in srgb,var(--linha) 42%,#b8934a);
color:var(--aceso);font-weight:700}
.abc-v .l.fora{opacity:.2}
/* O RODAPE SO EXISTE QUANDO TEM ALGUMA COISA PARA DIZER, e sem paginas o que
   sobra e o saltador das datas. */
.est-pes{flex:0 0 auto;display:flex;align-items:center;gap:10px;
padding:8px 34px 0 0;font-size:11px}
/* O SALTADOR DAS DATAS, no desenho que ele mandou: caixas de cantos redondos
   numa fila. As cores sao as da casa e nao as da figura, que era azul. */
.saltar{flex:1 1 auto;display:flex;flex-wrap:wrap;align-items:center;gap:8px;
justify-content:center;margin:0}
.saltar select.cx{font:inherit;font-size:11px;letter-spacing:.10em;
background:var(--caixa);color:var(--texto);border:1px solid var(--linha);
border-radius:12px;padding:6px 12px;min-width:88px}
.saltar select.cx:hover,.saltar select.cx:focus{border-color:var(--aceso);
outline:none}
.saltar .btn{padding:5px 14px;font-size:10px;letter-spacing:.14em}
.saltar .aut{font-size:9px;color:var(--fraco);opacity:.7}

/* AS CAPAS. Quatro por fila e o que ele pediu, e e a omissao; as outras duas
   larguras existem porque quatro capas de 237 pixeis mostram UMA fila e um
   quarto de cada vez, e isso mediu-se no ecra. */
.estante{display:grid;gap:16px 15px;padding-bottom:8px}
.estante.t-grandes{grid-template-columns:repeat(4,minmax(0,1fr))}
.estante.t-medias{grid-template-columns:repeat(6,minmax(0,1fr))}
.estante.t-pequenas{grid-template-columns:repeat(8,minmax(0,1fr))}
.estante.t-medias{gap:13px 12px}
.estante.t-pequenas{gap:11px 10px}
/* A MOLDURA ESTA PARTIDA EM DUAS, e a ordem e dele: a capa abre a ficha, a
   faixa de baixo selecciona. A caixa de marcar continua no HTML, porque e
   ela que leva o `sel` e e ela que o teclado apanha, e nao se ve. */
/* O `content-visibility:auto` ESTEVE AQUI E SAIU, e a razao fica escrita
   porque a tentacao de o repor e grande: ele leva a abertura da estante
   inteira de 582 para 295 ms no computador e de 740 para 290 no telemovel.
   Sao numeros bons e nao chegam.
   O QUE ELE CUSTA E A EXACTIDAO DO INDICE. Com ele, o browser so sabe a
   altura verdadeira de um cartao depois de o desenhar, e um salto atravessa
   dezenas de milhar de pixeis de alturas ESTIMADAS: das 23 letras vivas, 14
   assentavam 120 a 220 pixeis ao lado, e a letra acesa na rolagem livre
   discordava do que estava no cimo. Sem ele, ZERO das 23 caem fora do sitio.
   Tentaram-se tres curas antes de o tirar, e ficam escritas para nao se
   voltarem a tentar: estimativas medidas fila a fila em cada largura, uma
   insistencia que repete o salto ate ele ficar quieto, e medir outra vez
   depois de a rolagem assentar. A terceira era ela propria o defeito, porque
   LER a posicao de um cartao escondido obriga o browser a desenha-lo e a
   lista encolhe por baixo dos pes de quem saltou.
   Um indice que cai ao lado da letra nao e um indice. */
.livro{position:relative;min-width:0;padding:8px 8px 9px;border-radius:10px;
background:color-mix(in srgb,var(--caixa) calc(var(--caixas)*1%),transparent);
border:1px solid var(--linha);
transition:border-color .18s ease,background .18s ease}
.livro:hover{border-color:var(--fraco)}
.livro .capa-liga{display:block;text-decoration:none;border:0}
.livro .capa-liga:hover{border:0}
.livro .moldura{display:block;position:relative}
/* A CAIXA DE MARCAR SAI DO ECRA E NAO DO HTML. `display:none` tirava-a
   tambem ao teclado; assim ela continua a receber o foco e a faixa acende. */
.livro .marca{position:absolute;width:1px;height:1px;opacity:0;margin:0;
pointer-events:none}
.livro .faixa{display:block;margin-top:8px;padding:5px 6px 4px;
border-radius:7px;cursor:pointer;
transition:background .15s ease}
.livro .faixa:hover{background:rgba(216,178,104,.14)}
/* A COR DA SELECCAO E A DA CAIXA DA PALAVRA-PASSE, e foi ele que a escolheu:
   `pode ser o castanho usado na caixa onde se insere a password`. */
.livro:has(.marca:checked){border-color:#d8b268;
background:color-mix(in srgb,var(--linha) 42%,#b8934a)}
.livro:has(.marca:checked) .faixa{background:rgba(6,4,2,.24)}
.livro:has(.marca:checked) .tit{color:var(--aceso)}
/* O TEXTO FICA CLARO E NAO ESCURO. A primeira versao punha-o num castanho
   escuro sobre a faixa ja escurecida, e no ecra o autor deixava de se ler. */
.livro:has(.marca:checked) .aut,.livro:has(.marca:checked) .marcas .m{
color:var(--texto);opacity:.92}
.livro:has(.marca:focus-visible){outline:2px solid var(--aceso);
outline-offset:2px}
/* O SELO DO PDF, desenhado e nao copiado. Ver o `SELO_DO_PDF`. */
.livro .selo-pdf{position:absolute;top:6px;right:6px;width:26px;height:26px;
filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}
.t-pequenas .livro .selo-pdf{width:20px;height:20px;top:4px;right:4px}
.livro .capa{display:block;width:100%;aspect-ratio:2/3;object-fit:cover;
border-radius:6px;background:rgba(0,0,0,.45);
box-shadow:0 5px 14px rgba(0,0,0,.5);
transition:transform .18s ease,box-shadow .18s ease}
.livro .capa-liga:hover .capa{box-shadow:0 10px 24px rgba(0,0,0,.62)}
.livro .capa.vazia{display:flex;align-items:center;justify-content:center;
border:1px dashed var(--linha);font-size:9px;color:var(--fraco);
letter-spacing:.10em}
/* A LOCALIZACAO SO SE MARCA QUANDO E A EXCEPCAO: um selo em 1786 cartoes a
   dizer `o normal` nao e informacao, e ainda empurrava o tamanho para a
   linha de baixo. O tracejado quer dizer o que parece: aquele livro ainda
   vai mudar de sitio. */
.livro .selo.temp{position:absolute;top:6px;right:6px;color:var(--aceso);
border-style:dashed;background:rgba(6,4,2,.82);font-size:8px;
letter-spacing:.12em;padding:1px 6px}
.livro .tit{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:
vertical;overflow:hidden;margin:0;font-size:12px;line-height:1.32;
color:var(--texto);text-transform:none;letter-spacing:0}
.livro .capa-liga:hover+.faixa .tit{color:var(--aceso)}
.livro .aut{display:block;margin-top:2px;font-size:11px;color:var(--fraco);
text-transform:none;letter-spacing:0;white-space:nowrap;overflow:hidden;
text-overflow:ellipsis}
.livro .marcas{display:flex;flex-wrap:wrap;gap:8px;margin-top:5px;
align-items:center}
.livro .marcas .m{font-size:9px;letter-spacing:.10em;color:var(--fraco);
opacity:.8}
/* O ID E UM NOME E NAO UM FACTO. Ver o `costura_o_id_le_se_como_id.py`. A
   largura fixa alinha os algarismos de fila para fila. */
.livro .marcas .m.ident{font-family:ui-monospace,SFMono-Regular,Menlo,
Consolas,monospace;letter-spacing:.01em;opacity:.6}
/* O TEMA E A UNICA MARCA DO CARTAO QUE ELE ESCREVE A MAO: as outras tres
   saem do proprio ficheiro. Leva caixa por baixo para se distinguir delas de
   relance, sem ler.
   DUAS ESCOLHAS DAQUI SAO DA BATERIA e nao do gosto. A folha inteira vai
   dentro de TODAS as paginas, e o `teste_shellbook_web.py` exige que a
   unidade em octetos nao apareca no ecra da correccao a mao, e que o numero
   de tres noves nao apareca no da depuracao. A primeira versao deste bloco
   tinha as duas coisas escritas, uma no texto e outra no raio do canto, e
   pintava-as nas duas paginas; a segunda versao meteu-as outra vez, dentro
   do comentario que explicava porque e que elas nao podiam la estar. Um
   comentario NAO E UM SITIO INOCENTE quando o ficheiro inteiro e servido ao
   browser. */
.livro .marcas .m.tema{color:var(--aceso);opacity:.95;text-transform:none;
letter-spacing:.02em;
background:color-mix(in srgb,var(--aceso) 12%,transparent);
border:1px solid color-mix(in srgb,var(--aceso) 32%,transparent);
border-radius:20px;padding:1px 7px}
.t-medias .livro .tit{font-size:11px;margin-top:6px}
.t-medias .livro .aut{font-size:10px}
.t-pequenas .livro{padding:6px 6px 7px}
.t-pequenas .livro .tit{font-size:10px;line-height:1.28;margin-top:5px}
.t-pequenas .livro .aut{font-size:9px}
.t-pequenas .livro .marcas{display:none}
.livro .capa-liga:hover .capa{transform:translateY(-2px)}

/* O balcao de levantamento.
   DUAS PALAVRAS DESTE BLOCO SAO ESCOLHA DA BATERIA e nao do gosto, e ja e a
   segunda vez nesta sessao que isto acontece: a folha inteira e servida
   DENTRO de todas as paginas, incluindo a da palavra-passe, e ha baterias
   que exigem que certas cordas nao aparecam nelas. O nome desta pagina em
   maiusculas e um dos separadores do menu, e a pagina da entrada tem de os
   mostrar todos por mostrar; e o numero de tres noves e o total que a caixa
   da depuracao nao pode repetir. Por isso este comentario escreve o nome em
   minusculas, e a moldura escondida encosta-se a tres mil pixeis.
   AS CLASSES DA ESTANTE SAO AS MESMAS de proposito: o pedido dele diz que os
   livros achados se veem `da mesma forma que os vemos na biblioteca`, e a
   maneira de os ver iguais nao e copiar a regra, e usar a mesma. O que fica
   aqui e so o que o balcao tem e a estante nao. */
.bal-porta .eb-grelha{grid-template-columns:repeat(2,minmax(0,1fr))}
.bal-barra{margin-bottom:12px}
.bal-linha{display:inline-flex;margin:0}
.bal-passo{padding:14px 16px 16px}
.bal-forma{margin:0}
.bal-recusa{white-space:pre-line;font-weight:600;letter-spacing:.08em}
.bal-lista{width:100%;border-collapse:collapse;margin:10px 0 4px;
font-size:11px}
.bal-lista th{text-align:left;font-size:9px;letter-spacing:.14em;
color:var(--fraco);font-weight:500;padding:4px 8px 5px;
border-bottom:1px solid var(--linha)}
.bal-lista td{padding:4px 8px;border-bottom:1px solid
color-mix(in srgb,var(--linha) 45%,transparent)}
.bal-lista td.n{color:var(--fraco);font-family:ui-monospace,SFMono-Regular,
Menlo,Consolas,monospace;font-size:10px;white-space:nowrap}
/* UM PEDIDO E UM BLOCO, e o titulo dele e a LINHA DA LISTAGEM DELA. Sem esta
   separacao, os livros achados de duas linhas seguidas encostavam-se uns aos
   outros e ninguem sabia qual respondia a qual. */
.bal-pedido{padding:10px 0 4px;border-top:1px solid
color-mix(in srgb,var(--linha) 60%,transparent)}
.bal-pedido:first-child{border-top:0}
.bal-linha-pedida{display:flex;flex-wrap:wrap;align-items:center;gap:9px;
margin:0 0 9px;font-size:12px;font-weight:400;letter-spacing:.02em;
text-transform:none}
.bal-linha-pedida i{color:var(--fraco);font-style:normal}
.bal-fila{margin-bottom:6px}
/* A RAZAO POR BAIXO DO CARTAO. E o que separa este balcao de um modelo: o
   cartao diz PORQUE e que apareceu, e le-se em voz alta. */
.bal-razao{display:block;margin-top:4px;font-size:9px;letter-spacing:.06em;
color:var(--fraco);text-transform:none;line-height:1.35}
.livro .marcas .m.bal-vezes{color:var(--aceso);opacity:.9}
.bal-perdido .capa.vazia{min-height:120px}
/* A MOLDURA QUE PUXA O EMBRULHO. Nao leva `display:none` de proposito: ha
   browsers que nao carregam o que esta escondido assim, e uma moldura que
   nao carrega e um descarregamento que nunca comeca. */
.bal-puxa{width:0;height:0;border:0;position:absolute;left:-3000px}

/* O APAGAR. O botao e o unico da casa que manda um ficheiro sair do lugar,
   e por isso nao se parece com os outros: leva a cor do aviso e fica
   afastado dos que gravam, para o dedo nao lhe cair em cima por engano. */
.btn.apagar{color:#e08a7a;border-color:color-mix(in srgb,#e08a7a 40%,
var(--linha))}
.btn.apagar:hover{color:#f0a08e;border-color:#e08a7a;
background:color-mix(in srgb,#e08a7a 10%,transparent)}
.fl-apagar{display:inline-flex;margin:0 0 0 auto}
.livro .marcas .m.apagado-em{color:#e08a7a;opacity:.9;text-transform:none;
letter-spacing:.02em}

/* A FICHA DE UM LIVRO */
.ficha-livro{display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap;
padding:18px 20px}
.fl-capa{flex:0 0 230px;max-width:100%}
.capa-livro{display:block;width:230px;max-width:100%;aspect-ratio:2/3;
object-fit:cover;border-radius:8px;border:1px solid var(--linha);
box-shadow:0 10px 28px rgba(0,0,0,.55);margin-bottom:12px}
.capa-livro.vazia{display:flex;align-items:center;justify-content:center;
border-style:dashed;font-size:10px;color:var(--fraco);letter-spacing:.10em}
.fl-capa .btn{display:inline-block;padding:8px 15px;font-size:10px;
letter-spacing:.14em;text-decoration:none}
.fl-corpo{flex:1 1 400px;min-width:0}
.fl-corpo h2{margin:0 0 6px;font-size:19px;line-height:1.25;
color:var(--aceso)}
.fl-linha{display:flex;flex-wrap:wrap;gap:10px;align-items:center;
margin:0 0 12px;font-size:9px;letter-spacing:.10em;color:var(--fraco)}
.fl-titulo{margin:20px 0 4px;font-size:10px;letter-spacing:.18em;
color:var(--fraco);border-top:1px solid var(--linha);padding-top:12px}
.fl-campos,.fl-medidos{display:grid;grid-template-columns:auto 1fr;
gap:5px 14px;margin:8px 0 4px}
.fl-campos dt,.fl-medidos dt{font-size:9px;letter-spacing:.14em;
color:var(--fraco);align-self:center;text-align:right}
.fl-campos dd,.fl-medidos dd{margin:0;font-size:12px;overflow-wrap:anywhere;
color:var(--texto)}
/* DE QUE ANDAR VEIO O VALOR. So a MAO leva medalha: as outras duas sao o
   caso normal, e quinze pilulas a dizer `a arvore` numa ficha nao dizem
   nada a ninguem. */
.fonte{display:inline-block;margin-left:8px;font-size:8px;letter-spacing:.10em}
.f-mao{color:var(--aceso);border:1px solid currentColor;border-radius:20px;
padding:1px 7px}
.f-arvore,.f-fonte{color:var(--fraco);opacity:.5}
p.gravou{color:var(--aceso);font-size:12px;text-transform:none;
letter-spacing:0;opacity:1}
/* O QUE ESTA GRAVADO, quando nao e o que se le. A leitura arruma as
   maiusculas de quatro campos e a base guarda o que as fontes dizem;
   esconder a diferenca era um ecra a mentir sobre a base. */
.cru{display:block;margin-top:1px;font-size:9px;color:var(--fraco);
opacity:.55;text-transform:none;letter-spacing:0;
font-family:ui-monospace,Menlo,Consolas,monospace}

/* A GRELHA DE ESCREVER, a mesma na ficha e no lote. Duas colunas de blocos e
   nao dezasseis filas de `rotulo | caixa`: em filas, a grelha do lote media
   mil e duzentos pixeis e o veredicto ficava a tres ecras do botao. */
.ec-grelha{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px 18px;margin:12px 0 6px}
.ec-bloco{display:flex;flex-direction:column;gap:3px;min-width:0}
.ec-bloco>label{font-size:9px;letter-spacing:.14em;color:var(--fraco)}
.ec-bloco input[type=text],.ec-bloco textarea{width:100%;box-sizing:
border-box;background:rgba(0,0,0,.32);color:var(--texto);
border:1px solid var(--linha);border-radius:6px;padding:6px 9px;font:inherit;
font-size:12px}
.ec-bloco textarea{line-height:1.45;resize:vertical}
.ec-bloco input[type=text]:focus,.ec-bloco textarea:focus{outline:none;
border-color:var(--aceso);background:rgba(0,0,0,.5)}
.ec-bloco .aut{font-size:9px;color:var(--fraco);opacity:.75;
text-transform:none;letter-spacing:0}

/* O LOTE */
.lote-painel{padding:16px 20px}
.lote-tira{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 4px;
max-height:132px;overflow-y:auto;padding:6px;border:1px solid var(--linha);
border-radius:10px;background:rgba(0,0,0,.28)}
.lote-tira img,.lote-tira .semcapa{width:34px;height:51px;object-fit:cover;
border-radius:3px;border:1px solid var(--linha);display:block}
.lote-tira .semcapa{border-style:dashed;background:rgba(0,0,0,.35)}
.v-variedade{display:block;margin-top:2px;font-size:10px;color:var(--fraco);
text-transform:none;letter-spacing:0;opacity:.8;line-height:1.4}
.veredicto{margin-top:14px;border-color:var(--aceso);padding:14px 16px}
.veredicto h3{margin-top:0}
.v-campo{display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;margin:5px 0}
.v-nome{font-size:9px;letter-spacing:.14em;color:var(--fraco);flex:0 0 130px}
.v-valor{font-size:12px;text-transform:none;letter-spacing:0;
color:var(--aceso);flex:0 1 auto;overflow-wrap:anywhere}
/* A CONTA E UMA FRASE E NAO UMA ETIQUETA. Visto no ecra: `11 MUDAM . 1 JA
   TEM ESSE VALOR` em maiusculas lia-se como um aviso e nao como uma
   contagem. */
.v-conta{font-size:11px;color:var(--fraco);flex:1 1 200px;
text-transform:none;letter-spacing:0}
.v-conta b{color:var(--texto)}
.rel-botoes.rel-cima{margin:12px 0 0}

@media (max-width:1000px){
.estante.t-grandes{grid-template-columns:repeat(3,minmax(0,1fr))}
.estante.t-medias{grid-template-columns:repeat(4,minmax(0,1fr))}
.estante.t-pequenas{grid-template-columns:repeat(5,minmax(0,1fr))}
.eb-grelha{grid-template-columns:repeat(2,minmax(0,1fr))}
.ec-grelha{grid-template-columns:1fr}
}
@media (max-width:620px){
.estante.t-grandes{grid-template-columns:repeat(2,minmax(0,1fr))}
.estante.t-medias{grid-template-columns:repeat(3,minmax(0,1fr))}
.estante.t-pequenas{grid-template-columns:repeat(4,minmax(0,1fr))}
.estante{gap:12px 10px}
.eb-grelha{grid-template-columns:1fr}
.est-accoes{gap:7px 10px;padding:6px 9px}
.est-accoes .btn.guardar{margin-left:0}
.est-accoes .btn,.est-accoes button{flex:1 1 auto;text-align:center;
padding:6px 8px;font-size:9px;letter-spacing:.08em}
.eb-conta{flex:1 1 100%}
.est-topo .btn,.est-topo button{flex:1 1 auto;text-align:center}
.eb-par{flex:1 1 100%}
.eb-par>select{flex:1 1 auto}
.livro .tit{font-size:11px}
.t-pequenas .livro .tit{font-size:9px}
.ficha-livro{padding:14px 14px;gap:16px}
.fl-capa{flex:1 1 100%}
.capa-livro{width:180px;margin-left:auto;margin-right:auto}
.fl-campos,.fl-medidos{grid-template-columns:1fr;gap:1px}
.fl-campos dt,.fl-medidos dt{text-align:left;margin-top:8px}
.v-nome{flex:1 1 100%}
/* NO TELEMOVEL A TIRA FICA ONDE ESTA, a direita, que e onde o polegar chega.
   Estreita mais um pouco e a caixa toca a lista. */
.est-pes{padding-right:34px;flex-wrap:wrap;gap:4px}
/* A TIRA AFASTA-SE DO BOTAO DO PAINEL. Visto no ecra do telemovel: o botao
   redondo do aspecto e `fixed` no canto de baixo a direita e tapava o `Y` e
   o `Z`. */
.abc-v{flex:0 0 23px}
.abc-v .l{font-size:9px;margin:0 1px}
.est-corpo{gap:4px}
.saltar{flex:1 1 100%}
/* E A FILA DAS ACCOES A PARES, que com o DESMARCAR passou a ser de tres
   linhas inteiras. */
.est-accoes #est-marcar,.est-accoes #est-limpar{flex:1 1 44%}
.est-accoes .eb-marca{flex:1 1 100%}
}

:root{--veu:0;--caixas:73;--raios:70;--difusao:10;--halo:0;--ritmo:193;--sombra:100;--brilhos:31;--tamanho:37;--centelha:1660;--cada:9;--duplos:10}
.barra{position:relative;z-index:3;display:flex;flex-wrap:nowrap;
align-items:center;gap:16px;padding:9px 16px;font-size:11px;
letter-spacing:.14em;background:rgba(6,4,2,.82);
border-bottom:1px solid var(--linha)}
.barra a{color:var(--fraco);text-decoration:none;white-space:nowrap}
.barra a:hover{color:var(--aceso)}
.barra a.activo{color:var(--texto);border-bottom:1px solid var(--aceso);
padding-bottom:2px}
.barra .sair{margin-left:auto;padding:2px 9px;border:1px solid var(--alerta);
border-radius:4px;background:#000;color:var(--alerta);letter-spacing:.10em}
.barra .sair:hover{background:var(--alerta);color:#000}
.barra .assina{margin-left:14px;color:var(--fraco);font-size:10px}
.barra .assina i{text-transform:lowercase;font-style:italic}
@media (max-width:560px){.barra{gap:9px;font-size:10px}
.barra .assina{display:none}}
/* A CAIXA DA PALAVRA-PASSE ERA GRANDE DE MAIS, e nao era so a largura: um
   `input` NAO herda a tipografia do corpo, ao contrario dos botoes, que a
   folha ja manda herdar. Sem `font` declarado ele saia com o tipo por
   omissao do browser, maior e de outra familia, e destoava de tudo o resto
   da pagina. Visto no ecra. */
/* SEGUNDA PASSAGEM, v143. Duas coisas, e sao ligadas.

   A LARGURA. Quem estreita e o `.campo` e NAO o `.entrar`: o
   `.entrar` segura tambem o titulo, que passou a `SHELLBOOK by
   PJR` e ficou mais comprido. A 125px ele partia-se em duas
   linhas.

   A POSICAO. O bloco deixa de pender do topo por `16vh` e passa
   a estar CENTRADO NA JANELA, para cair em cima do tapete da
   fotografia. Isto faz-se SEM CONSTANTE NENHUMA, e a razao esta
   la em cima: o `#cena` e `position:fixed` com `inset:0` e
   `background-position:center`, portanto a caixa onde o `cover`
   e calculado E o ecra, e o centro da imagem cai sempre no
   centro do ecra, em qualquer janela. Um `position:fixed` aqui
   usa esse mesmo sistema de coordenadas e acompanha-o sozinho.
   Um numero fixo acertava num monitor e falhava noutro.

   NAO SE MEXE NO `main`, que e partilhado pelas cinco paginas.
   Centrar por flex la em cima deslocava as outras quatro.

   A caixa fica vazia e a palavra vai por baixo, como na entrada
   do GIST. Visto no ecra. */
.entrar{position:fixed;top:64%;left:50%;
transform:translate(-50%,-50%);width:340px;
max-width:calc(100vw - 24px);text-align:center}
.entrar .campo{position:relative;margin:45px auto 0;max-width:125px}
.entrar input{box-sizing:border-box;width:100%;padding:5px 34px 5px 10px;background:color-mix(in srgb,var(--linha) 42%,#b8934a);
color:var(--aceso);border:1px solid #d8b268;border-radius:8px;
font:12px/1.5 inherit;font-family:inherit;letter-spacing:.04em}
.entrar .rotulo-pass{margin:8px 0 0;font-size:12px;
text-shadow:0 1px 2px rgba(0,0,0,.9),0 0 8px rgba(0,0,0,.75),
0 0 20px rgba(0,0,0,.55);
letter-spacing:.20em;text-transform:uppercase;color:var(--aceso);
opacity:1}
.entrar h1{font-size:26px;font-weight:700;letter-spacing:.14em;
margin:0 0 24px}
.entrar h1 .cintila{background:linear-gradient(
100deg,#f0e4cf 22%,#fffdf5 46%,#ffffff 50%,#fffdf5 54%,
#f0e4cf 78%);background-size:300% 100%;
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;color:transparent;
animation:sb-cintila 5s ease-in-out infinite;
filter:drop-shadow(0 2px 2px rgba(0,0,0,.55))}
@keyframes sb-cintila{0%{background-position:130% 0}100%{background-position:-30% 0}}
@media (prefers-reduced-motion:reduce){.entrar h1 .cintila{
animation:none;-webkit-text-fill-color:var(--texto);
color:var(--texto)}}
.entrar h1 i{text-transform:lowercase;font-style:italic;
font-weight:400;font-size:.55em;letter-spacing:.04em;opacity:.8}
/* O OLHO E UM `type=button`, e nao e detalhe: dentro de um formulario, um
   botao sem tipo declarado e um botao de SUBMIT, e carregar nele mandava a
   palavra-passe em vez de a mostrar. */
.entrar #olho{position:absolute;right:3px;top:50%;transform:translateY(-50%);
background:none;border:0;padding:5px 8px;font-size:13px;line-height:1;
color:var(--fraco);cursor:pointer}
.entrar #olho:hover{color:var(--aceso);border:0}
.entrar #olho[aria-pressed="true"]{color:var(--aceso)}


/* SO O QUE E NOVO. O `.cartao`, o `.intro`, o `.nota` e o `.falhou` ja
   estao desenhados na casa, com os tokens dela: `--aceso` para o numero,
   `--fraco` para a etiqueta, `--texto` para o corpo e `--alerta-solto` para
   o que corre mal. Redesenha-los aqui era ter duas folhas de estilo a
   discutir a mesma caixa, e a que perde muda de um ecra para o outro. */
/* O CONTORNO E O FUNDO VEM DO `painel` DA CASA. Aqui so entra o que e da
   moldura e nao do painel.
   A FOLGA ENTRE AS TRES E DELE: com os 14px do painel elas liam-se como uma
   so caixa partida em tres, e sao tres perguntas diferentes. */
/* MAIS AFASTADAS E MAIS TRANSPARENTES, as duas por ordem dele. A
   transparencia sai da MESMA formula da casa com menos de metade da
   percentagem: a moldura e o fundo de que os cartoes se destacam, e um
   fundo com o mesmo peso deles deixa de ser fundo. */
.moldura{padding-bottom:22px;margin:56px 0;
 background:color-mix(in srgb,var(--caixa) calc(var(--caixas)*0.4%),
  transparent)}
.moldura:first-of-type{margin-top:26px}
/* O PAINEL DO TRABALHO E UMA CAIXA GRANDE COMO AS MOLDURAS, e era a unica
   desta pagina com outra transparencia. MEDIDO NO CODIGO E NAO SUPOSTO: a
   folha da casa da `calc(var(--caixas)*1%)` a `.painel`, e a regra da
   `.moldura` aqui em baixo da `*0.4%`. O painel do trabalho e `.painel` sem
   `.moldura`, por isso ficava-se pelo 1% e lia-se como outro material
   sobre a mesma fotografia.
   A FORMULA REPETE-SE COM AS MESMAS VARIAVEIS e nunca com uma cor escrita
   a mao: duas cores a mao separam-se no dia em que o painel do aspecto
   mexer numa delas. */
#trabalho{background:color-mix(in srgb,var(--caixa)
  calc(var(--caixas)*0.4%),transparent)}
.moldura>header{display:flex;align-items:center;justify-content:space-between;
 gap:12px;margin:0 0 12px}
.moldura>header h2{margin:0}
/* O TITULO QUE E BOTAO TEM DE SE PERCEBER QUE E UM BOTAO. A primeira
   versao era o titulo liso, e ele disse-o em cinco palavras: `nao se
   percebe que existe`. Um controlo que so se descobre por acidente do
   cursor nao e um controlo.
   Ganha caixa PROPRIA, com o mesmo aro leve dos cartoes, mas NAO ganha
   linha: continua no canto superior esquerdo, onde o `h2` estava. */
.moldura .titulo-accao{display:inline}
.moldura button.titulo{background:color-mix(in srgb,var(--caixa)
  calc(var(--caixas)*1%),transparent);
 border-width:1px;border-style:solid;border-radius:6px;padding:5px 12px;
 margin:0;
 font:inherit;color:var(--texto);letter-spacing:inherit;
 text-transform:inherit;cursor:pointer}
.moldura button.titulo:hover:not([disabled]),
.moldura button.titulo:focus-visible{color:var(--aceso)}
.moldura button.titulo[disabled]{opacity:.4;cursor:default}
/* E O CABECALHO ENCOSTA-SE A ELE em vez de o deixar a flutuar. */
.moldura>header{align-items:center}
.moldura .quando{font-size:11px;letter-spacing:.14em;margin:0 0 14px;
 color:var(--fraco)}
.moldura .quando strong{color:var(--texto);font-weight:400}
/* A ORDEM COM QUE ELA CORREU, ao lado da data. Os mesmos numeros querem
   dizer coisas diferentes conforme a ordem, e uma data sem ela obriga a ir
   procurar qual das duas foi. */
.moldura .ordem-que-correu{margin-left:14px;padding:2px 8px;border-radius:6px;
 border:1px solid var(--linha);background:var(--caixa);color:var(--aceso);
 font-size:10px;letter-spacing:.14em;white-space:nowrap}
.moldura .grelha{display:grid;gap:12px;margin:0}
.moldura .grelha.duas{grid-template-columns:repeat(2,minmax(0,1fr))}
.moldura .grelha.tres{grid-template-columns:repeat(3,minmax(0,1fr))}
.moldura .grelha.caixas{grid-template-columns:1.7fr repeat(4,minmax(0,1fr))}
/* AROS BRANCOS LEVES, finos e cheios, a volta de TODAS as caixas pequenas.
   MEDIDO E NAO SUPOSTO: o `--linha` da casa e `#3a2c18`, um castanho
   escuro. Sobre um fundo escuro ele nao se ve, e foi por isso que os aros
   `desapareceram` quando deixaram de ser tracejados: o tracejado dava-lhes
   um contorno que a cor sozinha nao dava.
   O branco sai do `--solto`, que e o branco da casa, com pouca presenca. E
   o branco INTEIRO continua a ser so do cursor. */
.moldura,.moldura .cartao,.popup,table.quadro th,
table.quadro td{border-style:solid}
.moldura,.moldura .cartao,.moldura button.ordem,.moldura .i,
.moldura button.titulo{
 border-color:color-mix(in srgb,var(--solto) 15%,transparent)}
.moldura{border-color:color-mix(in srgb,var(--solto) 10%,transparent)}
.moldura .grelha .cartao{max-width:none;flex:none;min-width:0}
.moldura .grelha.ordens{margin-top:14px}
/* O CARTAO QUE ABRE UMA JANELA E UM BOTAO e nao uma caixa. Herda o desenho
   do `.cartao` da casa e so acrescenta o que um botao tem de ter: o cursor,
   o alinhamento a esquerda que o `button` nao da, e um foco que se ve. */
/* UM CARTAO QUE E BOTAO CONTINUA A SER UM CARTAO, e este e o defeito que
   me custou o primeiro ecra: a folha da casa da aos `button` um fundo CHEIO
   e aos `.cartao` um fundo com a transparencia do aspecto. Eu tinha posto
   `background:none` para o botao nao parecer um botao, e o que aconteceu foi
   os cartoes que se podem abrir ficarem TRANSPARENTES ao lado dos que nao se
   podem, sobre a fotografia do fundo. A formula repete-se aqui uma vez, com
   as MESMAS variaveis da casa e nunca com cores escritas a mao, para os
   cartoes de uma fila serem todos o mesmo objecto. */
button.cartao{display:block;text-align:left;color:inherit;
 font:inherit;cursor:pointer;width:100%;
 background:color-mix(in srgb,var(--caixa) calc(var(--caixas)*1%),
  transparent)}
button.cartao .n,button.cartao .r{display:block}
/* O ARO SO APARECE QUANDO O CURSOR PASSA, e e BRANCO. Ordem dele, e vale
   para TODOS os clicaveis desta pagina: em repouso nao ha aro nenhum, e o
   que distingue um cartao que se abre de um que nao se abre e o cursor.
   Um aro permanente em tudo o que e clicavel enche a pagina de contornos e
   deixa de dizer o que quer que seja. */
.moldura button.cartao,.moldura button.ordem,.moldura .i,
.moldura button.titulo,.popup .fechar{transition:border-color .12s}
.popup .fechar{border-color:color-mix(in srgb,var(--solto) 15%,transparent)}
.moldura button.cartao:hover,.moldura button.cartao:focus-visible,
.moldura button.ordem:hover:not([disabled]),
.moldura button.ordem:focus-visible,
.moldura .i:hover,.moldura .i:focus-visible,
.moldura button.titulo:hover:not([disabled]),
.moldura button.titulo:focus-visible,
.popup .fechar:hover,.popup .fechar:focus-visible{
 border-color:var(--solto);border-style:solid}
@media (prefers-reduced-motion:reduce){
 .moldura button.cartao,.moldura button.ordem,.moldura .i,
 .popup .fechar{transition:none}}
.cartao.grande .n{font-size:44px}
/* O QUE MUDA E A COR DO NUMERO E NAO A DO CARTAO, e ele corrigiu-me nisto:
   `nao e o botao que fica diferente, e a cor dos numeros`. A caixa e igual
   as vizinhas; o que se destaca e o algarismo.

   A CASA NAO TEM COR DE DESTAQUE, E ISSO E UMA MEDICAO E NAO UMA OPINIAO.
   Lidas do aspecto dele:  aceso #fff7e6   texto #f0e4cf
                           solto #ffffff   fraco #d4c2a4
   Sao quatro tons do mesmo creme. Nenhum destaca coisa nenhuma dos outros,
   e foi por isso que as minhas DUAS tentativas anteriores nao mudaram nada
   no ecra: pedi a casa uma cor que ela nao tem.
   POR ISSO A COR DO TOTAL E A UNICA ESCRITA A MAO NESTA PAGINA. Esta aqui,
   com nome proprio, para se poder mudar num sitio so, e e o ambar do sol
   que ja esta na fotografia do fundo dele.
   O TOTAL ACENDE E A PARTE FICA NO TEXTO NORMAL: os FICHEIROS sao o total
   de que os quatro da direita sao a reparticao, e os NOVOS LIVROS sao os
   que FICAM. Um total com a mesma cor das partes le-se como mais uma
   parte. */
.moldura{--total:#e9b45a}
.moldura .cartao .n{color:var(--texto)}
.moldura .cartao.destaque .n{color:var(--total)}
/* O `i` E MINUSCULO, EM TIMES NEW ROMAN E EM ITALICO. Ordem dele, depois
   de o ver no ecra. E a unica letra desta pagina com serifa, e e isso que a
   faz ler-se como um sinal e nao como texto. */
/* SEM A ABREVIATURA `border:`, e a razao esta medida. Esta regra vinha
   DEPOIS da que pinta os aros e tinha a mesma especificidade, por isso o
   `border:1px solid transparent` reganhava e apagava o aro. Foi assim que o
   `i` e as duas ordens ficaram sem contorno nenhum enquanto os cartoes ao
   lado o tinham. Aqui poe-se a LARGURA e o ESTILO; a cor vem de um sitio
   so, mais abaixo. */
.moldura .i{width:26px;height:26px;border-radius:50%;cursor:pointer;
 border-width:1px;border-style:solid;background:var(--caixa);
 color:var(--aceso);
 line-height:1;flex:none;padding:0;letter-spacing:0;text-transform:none;
 font-family:"Times New Roman",Times,serif;font-style:italic;font-size:17px}
.moldura .i:hover,.moldura .i:focus-visible{color:var(--solto)}
.moldura button.ordem{width:100%;padding:14px;border-radius:8px;
 cursor:pointer;border-width:1px;border-style:solid;
 background:color-mix(in srgb,var(--caixa) calc(var(--caixas)*1%),
  transparent);
 color:var(--texto);font:inherit;letter-spacing:.16em;font-size:12px}
.moldura button.ordem:hover:not([disabled]),
.moldura button.ordem:focus-visible{color:var(--aceso)}
.moldura button.ordem[disabled]{opacity:.35;cursor:default}
/* O RECARREGAR SO LE, e por isso nao se parece com as duas que escrevem:
   fica encostado aos numeros que refresca e ocupa a largura toda. */
/* AS DUAS ORDENS ficam encostadas aos numeros: o que as separa do
   RECARREGAR e ele estar no titulo, e nao um espaco entre elas. */
/* A JANELA E UM `<dialog>` do proprio browser: sem biblioteca nenhuma, e
   fecha com o `Esc` como todas as outras janelas que ele conhece. */
/* O `currentColor` NUM ARO E UMA COR QUE MUDA COM O TEXTO, e por isso nao
   e uma cor: numa janela com titulo aceso e miolo em texto normal ele da
   dois aros diferentes na mesma caixa. Aqui poe-se largura e estilo; a cor
   vem toda do fim da folha. */
.popup{border-width:1px;border-style:solid;border-radius:10px;padding:0;
 color:var(--texto);background:#000;max-width:min(760px,92vw)}
.popup::backdrop{background:rgba(0,0,0,.6)}
.popup header{display:flex;align-items:center;justify-content:space-between;
 gap:16px;padding:12px 16px;border-bottom-width:1px;
 border-bottom-style:solid;
 border-bottom-color:color-mix(in srgb,var(--solto) 15%,transparent)}
.popup h3{margin:0;font-size:11px;letter-spacing:.18em;color:var(--aceso)}
.popup h4{font-size:10px;letter-spacing:.18em;color:var(--fraco);
 margin:22px 0 6px}
.popup .miolo{padding:14px 16px 20px;max-height:70vh;overflow:auto;
 text-transform:none;letter-spacing:0}
.popup .miolo p{margin:0 0 8px;font-size:13px}
.popup .fechar{cursor:pointer;background:none;color:var(--fraco);font:inherit;
 border-width:1px;border-style:solid;border-radius:6px;padding:3px 10px;
 font-size:10px;letter-spacing:.14em}
.popup .fechar:hover{color:var(--aceso)}
dl.legenda{margin:0}
dl.legenda dt{font-size:10px;letter-spacing:.16em;margin-top:14px;
 color:var(--aceso)}
dl.legenda dd{margin:3px 0 0;font-size:13px}
table.quadro{border-collapse:collapse;width:100%;margin-top:10px}
table.quadro th,table.quadro td{border-bottom-width:1px;
 border-bottom-style:solid;
 border-bottom-color:color-mix(in srgb,var(--solto) 15%,transparent);
 padding:5px 8px;text-align:left;font-size:12px}
table.quadro th{font-size:10px;letter-spacing:.16em;color:var(--fraco)}
table.quadro .num{text-align:right;font-variant-numeric:tabular-nums}
/* A LINHA EM QUE OS DOIS NUMEROS DIFEREM E A RESPOSTA A PERGUNTA, por isso
   e a unica que se realca. Realcar todas era nao realcar nenhuma. */
table.quadro tr.difere td{color:var(--aceso)}
ul.razoes{margin:6px 0 0;padding-left:18px;font-size:12px;
 font-family:ui-monospace,Menlo,Consolas,monospace;text-transform:none;
 letter-spacing:0}
/* A COR DOS AROS VIVE NUM SITIO SO E E A ULTIMA A FALAR, de proposito.
   Qualquer abreviatura `border:` escrita depois desta ganhava-lhe em
   silencio, e foi assim que o `i` e as duas ordens ficaram sem aro. Escrita
   no fim, ela e a ultima palavra e nenhuma regra acima lha tira. */
.moldura,.moldura .cartao,.moldura button.ordem,.moldura .i,
.moldura button.titulo,.popup,.popup .fechar{
 border-color:color-mix(in srgb,var(--solto) 15%,transparent)}
.moldura{border-color:color-mix(in srgb,var(--solto) 10%,transparent)}
/* E O BRANCO INTEIRO E SO DO CURSOR. */
.moldura button.cartao:hover,.moldura button.cartao:focus-visible,
.moldura button.ordem:hover:not([disabled]),
.moldura button.ordem:focus-visible,
.moldura .i:hover,.moldura .i:focus-visible,
.moldura button.titulo:hover:not([disabled]),
.moldura button.titulo:focus-visible,
.popup .fechar:hover,.popup .fechar:focus-visible{
 border-color:var(--solto)}

@media (max-width:860px){
 .moldura .grelha.caixas{grid-template-columns:repeat(2,minmax(0,1fr))}
 .cartao.grande .n{font-size:32px}}
@media (max-width:520px){
 .moldura .grelha.duas,.moldura .grelha.tres,
 .moldura .grelha.caixas{grid-template-columns:1fr}}