/* Identidade PROVISÓRIA: papel cru, preto, vermelho de carimbo.
   Tipografia condensada de sistema. Nada aqui é arte final. */
:root {
  /* L1: escala maior, com mínimo legível. O protótipo estava desenhado para
     caber, não para ler — e o teste do estranho (§16.4) reprova o que só o
     autor enxerga. Layout de celular é projeto próprio, depois. */
  font-size: 18px;
  --papel: #EDE4CF;
  --papel-fundo: #E2D7BE;
  --tinta: #16130E;
  --tinta-fraca: #5C5344;
  --vermelho: #C2251B;
  --linha: #B9AC90;
  --condensada: "Avenir Next Condensed", "Helvetica Neue Condensed",
                "Roboto Condensed", "Arial Narrow", system-ui, sans-serif;
}
* { box-sizing: border-box; }
/* display: grid/flex vencia o atributo hidden e a fase vazava por baixo da
   perna. O atributo e semantica; a folha nao pode contraria-lo. */
[hidden] { display: none !important; }
body {
  margin: 0; background: var(--papel-fundo); color: var(--tinta);
  font-family: var(--condensada); font-stretch: condensed;
  line-height: 1.35;
}
header {
  display: flex; align-items: baseline; gap: 1rem;
  padding: .6rem 1rem; background: var(--tinta); color: var(--papel);
  position: sticky; top: 0; z-index: 5;
}
.marca { font-size: 1.5rem; font-weight: 800; letter-spacing: .06em; }
.marca span { color: var(--vermelho); }
.fase { flex: 1; text-transform: uppercase; letter-spacing: .12em;
        font-size: .8rem; color: #C9BFA6; }
.orcamento { text-align: right; }
.orcamento span { font-size: 2.3rem; font-weight: 800; display: block;
                  line-height: 1; }
.orcamento small { font-size: .68rem; letter-spacing: .1em;
                   text-transform: uppercase; color: #C9BFA6; }
main { display: grid; gap: 1rem; padding: 1rem; max-width: 1200px;
       margin: 0 auto; grid-template-columns: 1fr; }
@media (min-width: 900px) {
  main { grid-template-columns: 15rem 1fr; grid-template-areas:
         "cartaz mural" "inquerito mural"; align-items: start; }
  .cartaz { grid-area: cartaz; } .mural { grid-area: mural; }
  .inquerito { grid-area: inquerito; }
}
h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .16em;
     color: var(--tinta-fraca); margin: 0 0 .5rem; }
h3 { font-size: .68rem; text-transform: uppercase; letter-spacing: .14em;
     color: var(--tinta-fraca); margin: .8rem 0 .3rem; }

/* Cartaz PROCURA-SE: no lugar do retrato 3x4 — o desaparecido é um cachorro */
.cartaz { background: var(--papel); border: 2px solid var(--tinta);
          padding: .8rem; box-shadow: 3px 3px 0 rgba(0,0,0,.18); }
.cartaz .selo { font-size: 1.5rem; font-weight: 800; letter-spacing: .18em;
                text-align: center; border-bottom: 3px solid var(--tinta);
                padding-bottom: .3rem; }
.cartaz .quem { font-size: 2rem; font-weight: 800; text-align: center;
                margin: .5rem 0 .2rem; }
.cartaz .rasgo { height: 5.5rem; margin: .4rem 0; border: 1px dashed var(--linha);
                 display: grid; place-items: center; color: var(--tinta-fraca);
                 font-size: .7rem; letter-spacing: .1em; text-align: center;
                 padding: .4rem; }
.cartaz .rastro { font-size: .78rem; color: var(--tinta-fraca); }

.mural, .inquerito { background: var(--papel); border: 1px solid var(--linha);
                     padding: .8rem; }
.grade { display: grid; gap: 2px; background: var(--linha);
         border: 1px solid var(--linha); overflow-x: auto; }
.grade .cab, .grade .cel { background: var(--papel); padding: .3rem; }
.grade .cab { font-size: .74rem; text-transform: uppercase;
              letter-spacing: .1em; color: var(--tinta-fraca);
              font-weight: 700; }
.grade .cel { min-height: 4.2rem; min-width: 8rem; display: flex;
              flex-wrap: wrap; gap: 3px; align-content: flex-start; }
/* linha de lugar: grade propria, para a ficha VAGA atravessar janelas */
.linha { background: var(--papel); display: grid; gap: 4px;
         grid-auto-rows: min-content; padding: .35rem; min-height: 4.2rem; }
.linha .guia { grid-row: 1 / -1; border-left: 1px solid var(--linha); }
.linha .guia:first-of-type { border-left: 0; }
.ficha.vaga { border-style: dashed; border-color: var(--tinta-fraca);
              font-style: italic; color: var(--tinta-fraca);
              background: transparent; }
.ficha.vaga.e-firme { background: var(--tinta-fraca); color: var(--papel); }
.legenda .e-vaga { border-style: dashed; border-color: var(--tinta-fraca); }
.legenda small { font-size: .58rem; }
.fora h3 small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.faixa-fora { display: flex; flex-wrap: wrap; gap: 3px; min-height: 2.2rem;
              padding: .3rem; background: var(--papel-fundo);
              border: 1px dashed var(--linha); }

.ficha { font-size: .8rem; padding: .28rem .45rem; border: 1px solid var(--tinta);
         background: var(--papel); cursor: default; max-width: 100%;
         display: flex; flex-direction: column; line-height: 1.25; }
.ficha b { font-weight: 700; }
.ficha i { font-style: normal; font-size: .72rem; color: var(--tinta-fraca); }
/* L4, metade de design: negativa sem hora dita é sussurro, não cartaz. */
.ficha.sussurro { background: transparent; border-style: dotted;
                  border-color: var(--tinta-fraca); color: var(--tinta-fraca); }
.ficha.sussurro b { font-weight: 400; }
/* L3c: a posição de quem respondeu é contexto, não resposta. */
.ficha.fundo { opacity: .45; }
.ficha.e-conflito { border-color: var(--vermelho); color: var(--vermelho);
                    border-width: 2px; font-weight: 700; }
.ficha.e-dubia { border-style: dashed; }
.ficha.e-firme { background: var(--tinta); color: var(--papel); }
.ficha.e-solta { border-style: dotted; color: var(--tinta-fraca); }
.ficha.axioma { box-shadow: 2px 2px 0 rgba(0,0,0,.2); }

.legenda { display: flex; flex-wrap: wrap; gap: .9rem; list-style: none;
           padding: .7rem 0 0; margin: 0; font-size: .78rem;
           color: var(--tinta-fraca); }
.legenda i { display: inline-block; width: .8rem; height: .8rem;
             margin-right: .25rem; vertical-align: -1px; border: 1px solid var(--tinta); }
.legenda .e-conflito { border-color: var(--vermelho); border-width: 2px; }
.legenda .e-dubia { border-style: dashed; }
.legenda .e-firme { background: var(--tinta); }
.legenda .e-solta { border-style: dotted; }

.depoentes { display: flex; flex-wrap: wrap; gap: .3rem; }
.depoentes button, .perguntas button {
  font: inherit; font-size: .9rem; padding: .3rem .55rem; cursor: pointer;
  background: var(--papel); border: 1px solid var(--tinta); color: var(--tinta);
}
.depoentes button[aria-pressed="true"] { background: var(--tinta); color: var(--papel); }
.perguntas { display: flex; flex-direction: column; gap: .25rem;
             margin-top: .6rem; }
.perguntas button { text-align: left; }
.perguntas button[disabled] { opacity: .45; cursor: default;
                              text-decoration: line-through; }
.transcricao { margin-top: .8rem; display: flex; flex-direction: column;
               gap: .5rem; max-height: 22rem; overflow-y: auto; }
.fala { border-left: 3px solid var(--tinta); padding: .2rem .5rem; }
.fala .quem { font-size: .66rem; text-transform: uppercase;
              letter-spacing: .1em; color: var(--tinta-fraca); }
.fala p { margin: .2rem 0 0; font-size: .98rem; max-width: 46ch; }

footer { padding: 1rem; max-width: 1200px; margin: 0 auto;
         display: flex; gap: 1rem; align-items: center; }
footer button { font: inherit; font-weight: 700; padding: .5rem 1rem;
                background: var(--vermelho); color: var(--papel);
                border: 0; cursor: pointer; letter-spacing: .08em;
                text-transform: uppercase; }
.aviso { font-size: .75rem; color: var(--tinta-fraca); }
dialog { background: var(--papel); border: 2px solid var(--tinta);
         max-width: 40rem; }
.celulas { display: flex; flex-wrap: wrap; gap: .3rem; margin: .6rem 0; }
.celulas button { font: inherit; font-size: .75rem; padding: .3rem .5rem;
                  background: var(--papel); border: 1px solid var(--tinta);
                  cursor: pointer; }

/* ------------------------------------------------ mural da perna (R8) */
.perna { max-width: 1200px; margin: 0 auto; padding: 1rem; }
.dica { font-size: .78rem; color: var(--tinta-fraca); margin: 0 0 .8rem; }
.pregos { display: grid; gap: .7rem;
          grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
.prego { background: var(--papel); border: 1px solid var(--linha);
         padding: .6rem; min-height: 9rem; display: flex;
         flex-direction: column; gap: .3rem; position: relative; }
.prego::before { content: ""; position: absolute; top: -4px; left: 50%;
                 width: 8px; height: 8px; border-radius: 50%;
                 background: var(--tinta); transform: translateX(-50%); }
.prego.trancado { background: repeating-linear-gradient(
                    45deg, var(--papel-fundo), var(--papel-fundo) 6px,
                    #DACDB0 6px, #DACDB0 12px); border-style: dashed; }
.prego.feito { border-color: var(--tinta); border-width: 2px; }
.prego .num { font-size: .66rem; letter-spacing: .14em; font-weight: 800;
              color: var(--tinta-fraca); }
.prego .titulo { font-size: .9rem; font-weight: 700; flex: 1; }
.prego .cadeado { font-size: .7rem; color: var(--tinta-fraca);
                  font-style: italic; margin: auto 0; }
.prego button { font: inherit; font-size: .74rem; padding: .25rem .5rem;
                background: var(--tinta); color: var(--papel); border: 0;
                cursor: pointer; align-self: flex-start; }
/* O fecho da perna. Sem música e sem revelação: o delegado olha o mural e diz
   uma frase. A régua vermelha à esquerda é a única marca — é a voz da casa
   voltando depois de dez casos calada. */
.despacho { margin-top: 1.4rem; padding: .8rem 0 .2rem .9rem;
            border-left: 3px solid var(--vermelho); max-width: 46rem; }
.despacho-quem { font-size: .62rem; letter-spacing: .16em; font-weight: 800;
                 text-transform: uppercase; color: var(--tinta-fraca); }
.despacho-fala { font-size: .92rem; margin-top: .35rem; max-width: 58ch; }
.postal-mini { font-size: .68rem; border: 1px solid var(--linha);
               padding: .2rem .3rem; background: var(--papel-fundo); }
/* O décimo prego (A3). Não é postal apagado nem erro de carregamento: é a
   moldura do que não foi pregado. Tracejado e sem fundo, para ler como falta
   ao lado de nove postais cheios. */
.prego-vazio { font-size: .68rem; border: 1px dashed var(--tinta-fraca);
               padding: .2rem .3rem; background: transparent;
               color: var(--tinta-fraca); font-style: italic; }
.selo-mini { font-size: .58rem; letter-spacing: .12em; font-weight: 800;
             align-self: flex-start; padding: .1rem .3rem;
             border: 1px solid var(--vermelho); color: var(--vermelho); }
.selo-mini.parcial { border-color: var(--tinta-fraca); color: var(--tinta-fraca); }
.voltar { font: inherit; font-size: .75rem; background: transparent;
          border: 1px solid var(--papel); color: var(--papel);
          padding: .2rem .5rem; cursor: pointer; }

/* ------------------------------------------------------- o arranque */
.cartaz.armado { cursor: grab; user-select: none; touch-action: none;
                 outline: 3px dashed var(--vermelho);
                 outline-offset: 3px; animation: chama 1.4s ease-in-out infinite; }
@keyframes chama { 50% { outline-color: var(--tinta); } }
.cartaz.arrancado { transform: rotate(-2.5deg) translateY(8px);
                    opacity: .55; transition: transform .35s, opacity .35s;
                    clip-path: polygon(0 0, 100% 0, 100% 62%, 86% 70%, 72% 60%,
                               58% 72%, 44% 61%, 30% 71%, 16% 60%, 0 69%); }

/* --------------------------------------------------------- epílogo */
.epilogo { max-width: 1200px; margin: 0 auto; padding: 1rem;
           background: var(--papel); border: 1px solid var(--linha); }
.carimbo { display: inline-block; border: 3px solid var(--vermelho);
           color: var(--vermelho); font-weight: 800; letter-spacing: .16em;
           padding: .25rem .7rem; transform: rotate(-3deg);
           font-size: 1rem; }
.carimbo.parcial { border-color: var(--tinta-fraca); color: var(--tinta-fraca); }
.carimbo.aberto { border-color: var(--tinta); color: var(--tinta); }
.epilogo h2 { font-size: 1rem; text-transform: none; letter-spacing: 0;
              color: var(--tinta); margin: .8rem 0 .4rem; }
.epilogo p { white-space: pre-wrap; font-size: .9rem; max-width: 62ch; }
.postal { border: 2px solid var(--tinta); padding: .6rem; margin: .8rem 0;
          max-width: 34rem; background: var(--papel-fundo); }
/* Mesma peça, mesma hierarquia: a ausência é o postal que não veio, não uma
   caixa de outra família (§17.2 — uma linguagem gráfica só). */
.postal.ausencia { border-style: dashed; border-color: var(--tinta-fraca);
                   background: transparent; }
.postal-nome { font-weight: 800; font-size: .9rem; }
.postal-citacao { font-size: .82rem; font-style: italic;
                  color: var(--tinta-fraca); margin-top: .3rem; }
.epilogo button { font: inherit; font-weight: 700; padding: .5rem 1rem;
                  background: var(--vermelho); color: var(--papel);
                  border: 0; cursor: pointer; text-transform: uppercase;
                  letter-spacing: .08em; }

/* ------------------------------------------------------------- log */
.log-texto { font-family: ui-monospace, Menlo, monospace; font-size: .68rem;
             background: var(--papel-fundo); border: 1px solid var(--linha);
             padding: .5rem; max-height: 24rem; overflow: auto;
             white-space: pre-wrap; }
.menu-dialogo { display: flex; gap: .5rem; padding: 0; margin: .6rem 0 0; }
.botao, footer .secundario, .menu-dialogo button {
  font: inherit; font-size: .78rem; padding: .35rem .7rem; cursor: pointer;
  background: var(--papel); border: 1px solid var(--tinta);
  color: var(--tinta); text-decoration: none; text-transform: none;
  letter-spacing: 0; font-weight: 400; }

/* L10 — ESCOPO DO VERMELHO. Dentro do mural, vermelho quer dizer UMA coisa:
   duas falas que não cabem juntas. Fora do mural — marca, botão de ação,
   carimbo — o vermelho é da casa e não acusa ninguém. As duas regras convivem
   porque o escopo está declarado, não porque o tom é diferente. */
.grade .ficha:not(.e-conflito),
.faixa-fora .ficha:not(.e-conflito) { border-color: var(--tinta); }

/* ---------------------------------------- L2: abertura do caso */
.abertura { max-width: 34rem; padding: 1.4rem; }
.abertura h2 { font-size: 1.5rem; text-transform: none; letter-spacing: 0;
               color: var(--tinta); margin: 0 0 .8rem; }
.corrido { font-size: 1rem; max-width: 44ch; line-height: 1.5; }
.rastro-prosa { border-left: 3px solid var(--linha); padding-left: .8rem;
                font-style: italic; color: var(--tinta-fraca); }
.pedido { border-top: 2px solid var(--tinta); margin-top: 1rem;
          padding-top: .8rem; display: flex; gap: 1rem; align-items: center;
          justify-content: space-between; }
.orcamento-grande { text-align: center; border: 3px solid var(--vermelho);
                    padding: .3rem .9rem; }
.orcamento-grande span { display: block; font-size: 3rem; font-weight: 800;
                         line-height: 1; color: var(--vermelho); }
.orcamento-grande small { font-size: .62rem; letter-spacing: .08em;
                          text-transform: uppercase; color: var(--tinta-fraca); }
.acao { background: var(--vermelho) !important; color: var(--papel) !important;
        border: 0 !important; font-weight: 700 !important;
        text-transform: uppercase !important; letter-spacing: .08em !important;
        padding: .5rem 1.2rem !important; }

/* ---------------------------------------- L7: caderno */
#caderno { max-width: 46rem; padding: 1.2rem; }
.caderno-falas { max-height: 26rem; overflow-y: auto; }
.caderno-anotacoes { border-top: 1px dashed var(--linha); padding-top: .5rem; }
.anotacao { font-size: .9rem; color: var(--tinta-fraca); max-width: 52ch;
            margin: .3rem 0; }
#ver-caderno { margin-top: .6rem; }

/* L6: a escolha do trato, na abertura da jornada */
.trato { font-size: .88rem; color: var(--tinta-fraca); margin: 0 0 1rem; }
.escolha-trato { font: inherit; font-size: .88rem; padding: .15rem .6rem;
                 background: var(--papel); border: 1px solid var(--tinta);
                 color: var(--tinta); cursor: pointer; }
.escolha-trato[aria-pressed="true"] { background: var(--tinta);
                                      color: var(--papel); font-weight: 700; }


/* ---------------------------------------- §17: todo mundo tem rosto.
   Sistema restrito antes do rosto: moldura, enquadramento, dois tons. O que
   está aqui é ANDAIME — a arte final substitui o miolo, não a moldura. */
.moldura { border: 2px solid var(--tinta); background: var(--papel-fundo);
           display: flex; flex-direction: column; align-items: center;
           justify-content: center; gap: .1rem; }
.moldura.preside { aspect-ratio: 3 / 4; width: 100%; margin: .5rem 0; }
.moldura.fileira { aspect-ratio: 3 / 4; width: 3.6rem; }
.retrato-pendente { font-weight: 800; color: var(--linha);
                    line-height: 1;
                    background: repeating-linear-gradient(135deg,
                      transparent, transparent 5px,
                      rgba(0,0,0,.05) 5px, rgba(0,0,0,.05) 10px);
                    width: 100%; flex: 1; display: grid; place-items: center; }
.moldura.preside .retrato-pendente { font-size: 3.4rem; }
.moldura.fileira .retrato-pendente { font-size: 1.3rem; }
.moldura small { font-size: .52rem; letter-spacing: .06em; color: var(--linha);
                 text-transform: uppercase; padding-bottom: .15rem; }
.moldura.fileira small { font-size: .42rem; }
.depoentes { gap: .5rem; }
.depoentes button.cara { display: flex; flex-direction: column;
                         align-items: center; gap: .2rem; padding: .3rem;
                         background: transparent; border: 1px solid transparent;
                         font-size: .78rem; }
.depoentes button.cara[aria-pressed="true"] { background: var(--tinta);
                                              color: var(--papel);
                                              border-color: var(--tinta); }
.depoentes button.cara[aria-pressed="true"] .moldura { border-color: var(--papel); }