/* LEXPORTUM — CICLO 9: LEGIBILIDADE.

   Folha do ciclo. Nada aqui inventa tela nova: são correções de leitura
   apontadas pelo playtest. Nenhum seletor alcança `.lex-opening` — a
   abertura final continua sendo assunto exclusivo de style-opening.css.

   O QUE ESTA FOLHA RESOLVE
     1. o rótulo do documento com arte era impresso EM CIMA da arte, que já
        traz texto impresso: título sobre título;
     2. papel fechado era um retângulo bege igual a todos os outros;
     3. a Mesa media 1447px de altura porque um único documento esticava
        para 294px e ocupava a linha inteira;
     4. a chamada do recurso nascia a 1900px do topo;
     8. a Rua não lembrava onde o jogador já tinha estado. */

/* ==================================================================== 1.
   DOCUMENTO COM ARTE: miniatura em cima, rótulo em faixa própria embaixo.
   É o tratamento que já funcionava nas cartas da Audiência — arte e texto
   em regiões separadas, nunca sobrepostos. A faixa é sólida no pé e só
   esmaece nos primeiros pixels, para o topo da primeira linha do título
   ter fundo de verdade. */
.doc.com-asset{
  min-height:126px;
  background-position:top center;
  padding:0 0 7px;
  gap:0}
/* A faixa é o próprio bloco do rótulo, não um retângulo de altura fixa por
   cima dele: assim ela cresce com o título e NENHUM nome de documento é
   cortado. O degradê acontece nos primeiros pixels da faixa, para a borda
   com a arte não ser uma linha dura. */
.doc.com-asset::after{display:none}
.doc.com-asset .tit{
  position:relative;z-index:2;width:100%;
  padding:7px 9px 2px;font-size:11.5px;line-height:1.22;font-weight:600;
  color:#fbf2e0;text-shadow:0 1px 2px rgba(0,0,0,.95);
  background:linear-gradient(180deg,
    rgba(14,10,7,.42) 0,
    rgba(14,10,7,.93) 11px,
    rgba(14,10,7,.97) 100%)}
.doc.com-asset .res{
  position:relative;z-index:2;width:100%;
  padding:0 9px 6px;font-size:10px;line-height:1.24;
  color:#cdbb9c;text-shadow:0 1px 2px rgba(0,0,0,.95);
  background:rgba(14,10,7,.97);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Fio de luz na quina da faixa: separa a arte do rótulo como um vinco. */
.doc.com-asset .tit::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:rgba(255,236,203,.13)}

/* ==================================================================== 2.
   PAPEL FECHADO: a silhueta diz QUE OBJETO É, nunca se ele presta.
   O verso continua verso — nada do conteúdo aparece antes de examinar. */
.doc.fechado{min-height:116px}
.doc.com-asset.fechado{min-height:116px;padding:10px 12px}
.doc.fechado .verso{opacity:.34;min-height:46px}
.doc.fechado .marca-forma{opacity:.5}

/* Papel de cada família. Diferenças de tom e de borda, no registro do
   material: papel comum, papel térmico de impressão, ficha de cartório,
   documento de juízo. Nenhuma cor vale "melhor" ou "pior". */
.doc.fechado[data-forma="papel"],
.doc.fechado[data-forma="pasta"]{
  background:linear-gradient(168deg,#eae1cb 0%,#dbd1b7 52%,#cec3a6 100%)}
.doc.fechado[data-forma="print"]{
  background:linear-gradient(168deg,#e9eaea 0%,#dcdedd 54%,#cdd0cf 100%);
  color:#4a5150}
.doc.fechado[data-forma="testemunha"]{
  background:linear-gradient(168deg,#efe6d2 0%,#e2d5b8 55%,#d3c5a3 100%);
  box-shadow:0 1px 0 rgba(0,0,0,.22),0 7px 15px rgba(0,0,0,.45),
             inset 3px 0 0 rgba(120,96,52,.35)}
.doc.fechado[data-forma="ficha"]{
  background:linear-gradient(168deg,#f2ece0 0%,#e6ddcb 55%,#d8cdb6 100%)}
/* Documento vindo do juízo: papel mais frio e um filete de tinta na borda. */
.doc.fechado[data-forma="ata"],
.doc.fechado[data-forma="sentenca"],
.doc.fechado[data-forma="recurso"]{
  background:linear-gradient(168deg,#e8e7e0 0%,#dcdbd2 54%,#cdccc2 100%);
  color:#4b4a42;
  box-shadow:0 1px 0 rgba(0,0,0,.22),0 7px 15px rgba(0,0,0,.45),
             inset 0 3px 0 rgba(86,74,52,.30)}

/* ==================================================================== 3.
   ALTURA DA MESA.
   A causa era `flex:1 1 154px` com grow: um documento sozinho numa coluna
   de 306px esticava para 294px e comia a linha toda. Sete provas viravam
   sete linhas. Com base menor os papéis se acomodam três por fileira, como
   papel espalhado se acomoda numa mesa — e a mesa encolhe pela metade.
   As CONTRADIÇÕES saem da coluna estreita da direita e viram uma prateleira
   larga: são resultado do que se organizou, e cabem numa fileira só. */
@media(min-width:1201px){
  .mesa-grade{
    grid-template-columns:336px 1fr 1fr;
    grid-template-areas:
      "pilha fatos  fatos"
      "pilha provas provas"
      "pilha teses  pedidos"
      "pilha contra contra"
      "pilha maleta fund"
      "peca  peca   peca"}
}
/* Papel tem tamanho de papel: nem estica para preencher a fileira, nem
   encolhe até o título não caber. Um documento sozinho numa área continua
   do tamanho de um documento. */
.mesa-madeira .doc{flex:0 0 154px;max-width:154px}
.mesa-madeira .doc.fechado{flex:0 0 100px;max-width:100px}
/* Fichas de tese e pedido são texto puro: pedem largura, não miniatura. */
.mesa-madeira .a-teses .doc,
.mesa-madeira .a-pedidos .doc,
.mesa-madeira .a-fundamento .doc{flex:0 1 210px;max-width:210px}
.a-contradicoes .tampo{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch}
.a-contradicoes .tampo > *{flex:1 1 158px}
.mesa-madeira.com-asset .a-teses,
.mesa-madeira.com-asset .a-pedidos,
.mesa-madeira.com-asset .a-contradicoes,
.mesa-madeira.com-asset .a-fundamento{min-height:132px}
.mesa-madeira.com-asset .area .tampo{min-height:88px}

/* ==================================================================== 4.
   RECURSO EM PRIMEIRO PLANO.
   O bloco é o mesmo de sempre; mudou de lugar no `screens-board.js` e aqui
   ganha o peso de uma intimação em cima da mesa, não de um rodapé. */
.recurso{
  margin:0 0 14px;
  border-color:#c08a3a;
  box-shadow:0 0 0 1px rgba(227,189,114,.18),0 10px 26px rgba(0,0,0,.42)}
.recurso .rot{font-size:15px;color:#f2ddb4;letter-spacing:.01em}
.recurso .falta-inline{color:#e0c894}
.recurso.nao-cabe{border-color:#3f5c42;box-shadow:none}
.recurso.bom,.recurso.ruim{margin-bottom:14px}
/* A dica da área do fundamento, no mesmo tom da instrução da maleta. */
.a-fundamento .instr{
  margin:0 0 8px;font-size:11px;line-height:1.35;
  color:#c8b48c;text-align:center}

/* ==================================================================== 8.
   A RUA LEMBRA.
   `.ponto.feito` já existia com opacity .5 — cedo demais para ser lido como
   "já estive aqui" e fácil demais de confundir com ponto desabilitado. */
.ponto.feito{opacity:.72}
.ponto.feito .rot{color:#cfc3a8}
.ponto.feito .halo{
  background:rgba(210,190,150,.55);
  box-shadow:0 0 0 3px rgba(210,190,150,.14)}
/* Marca discreta de "já passei por aqui". NÃO diz se rendeu alguma coisa:
   ponto que entregou prova e ponto que não entregou ficam idênticos. */
.ponto.feito .rot::after{
  content:"·  visto";
  margin-left:7px;font-size:9.5px;letter-spacing:.06em;
  color:#a2977f;text-transform:uppercase}

/* O que falta, consultável de dentro da cena: um bilhete preso na quina do
   quadro. Fica fora do caminho dos pontos de interação e não recebe clique
   — é consulta, não ação. */
.lacuna-aqui{
  position:absolute;top:12px;left:12px;z-index:4;pointer-events:none;
  display:inline-flex;align-items:flex-start;gap:8px;
  max-width:min(520px,66%);
  padding:7px 14px;border-radius:13px;
  background:rgba(12,9,5,.78);border:1px solid rgba(227,189,114,.26);
  color:#e9d7ae;font-size:11.5px;line-height:1.25;
  box-shadow:0 6px 16px rgba(0,0,0,.5);
  backdrop-filter:blur(2px)}
.lacuna-aqui svg{flex:none;margin-top:1px;color:#e3bd72}
.lacuna-aqui b{font-weight:600}
/* O bilhete não recebe clique, então não há tooltip para socorrer texto
   cortado: a frase inteira precisa caber. */
.lacuna-aqui i{font-style:normal;color:#b3a488}

@media(max-width:900px){
  .lacuna-aqui{max-width:calc(100% - 24px)}
  .lacuna-aqui i{display:none}
}


/* ==================================================================== 10.
   O FEEDBACK DEIXA DE TAPAR A MESA.

   `.fx-camada` é fixa e vinha centrada no rodapé da janela, com 620px de
   largura: no tamanho de tela mais comum ela pousava exatamente sobre a
   placa de TESES. A lógica do fx.js não muda — ele continua criando a mesma
   camada, com a mesma arte e a mesma animação de 1,5s. Muda para onde ela
   aponta e o quanto ocupa.

   Com a barra lateral visível (>=901px) o feedback vai para a coluna dela,
   que tem 240px de chrome e nenhum conteúdo da Mesa: a sobreposição com
   qualquer área do tampo passa a ser zero, não "pequena".
   Sem barra lateral, ele encolhe e encosta no canto inferior esquerdo, longe
   das placas de latão, que ficam centradas nas suas áreas. */
@media(min-width:901px){
  .fx-camada{left:0;right:auto;width:240px;bottom:20px}
  .fx-arte{width:196px;height:72px}
  .fx-txt{margin-top:4px;font-size:11px;line-height:1.25;text-align:center;padding:0 12px}
}
@media(max-width:900px){
  /* Sem a coluna da barra lateral não existe faixa livre: qualquer camada
     fixa cobre alguma coisa. Então ela vira o menor selo possível, encostado
     no canto, longe das placas de latão — que ficam centradas nas áreas. */
  .fx-camada{left:0;right:auto;width:min(268px,84vw);bottom:10px;align-items:flex-start}
  .fx-arte{width:100%;height:44px;background-position:left center}
  .fx-txt{margin-top:2px;font-size:10.5px;line-height:1.2;text-align:left;padding:0 12px}
}