/* PRESO! · interface de teste.
 * Papel cru, tinta preta, um único acento vermelho reservado ao PRESO!.
 * Nada brilha, nada tem degradê, nada tem sombra.
 *
 * Os três estados do retrato se distinguem num relance e em tons de cinza:
 *   livre     papel claro, borda TRACEJADA fina, sem selo;
 *   inocente  papel escuro, borda cheia grossa, selo "inocente" em tinta;
 *   culpado   tinta cheia, letra em papel, selo "culpado".
 */

@font-face {
  font-family: "Anton";
  src: url("fontes/anton-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --papel: #EFE7D6;
  --papel-claro: #FAF6EC;
  --papel-escuro: #D9CCB1;
  --tinta: #151310;
  --tinta-2: #463F35;
  --preso: #b3382c;
  --titulo: "Anton", Impact, "Arial Narrow", sans-serif;
  --texto: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --gutter: 16px;
}

* { box-sizing: border-box; }

html, body { margin: 0; }
body {
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 16px;
  line-height: 1.4;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

button { font: inherit; color: inherit; }
button:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; }

main { max-width: 1240px; margin: 0 auto; padding: 12px var(--gutter) 48px; }
.carregando { font-style: italic; }

h1, h2, h3, .titulo { font-family: var(--titulo); font-weight: 400; letter-spacing: .01em; margin: 0; line-height: 1.05; }

/* ---------- botões ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 8px 14px;
  border: 2px solid var(--tinta); background: var(--papel-claro);
  font-weight: 700; cursor: pointer; border-radius: 0;
}
.botao:active { background: var(--papel-escuro); }
.botao-tinta { background: var(--tinta); color: var(--papel); }
.botao-tinta:active { background: var(--tinta-2); }
.botao-preso { background: var(--preso); border-color: var(--preso); color: #FFF8EE; font-family: var(--titulo); font-weight: 400; font-size: 20px; letter-spacing: .03em; }
.botao-preso:active { background: #8f2a20; }
.botao-leve { border-width: 1px; background: transparent; font-weight: 400; }
.link { background: none; border: 0; padding: 8px 0; min-height: 44px; text-decoration: underline; cursor: pointer; }

/* ---------- tela inicial ---------- */
.marca { font-size: 64px; margin: 8px 0 0; }
.sub { margin: 4px 0 20px; color: var(--tinta-2); }
.lista-casos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.caso-item {
  width: 100%; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px;
  padding: 14px; border: 2px solid var(--tinta); background: var(--papel-claro); text-align: left; cursor: pointer;
}
.caso-item .titulo { font-size: 28px; }
.caso-item .faixa { display: block; color: var(--tinta-2); font-size: 14px; margin-top: 2px; }
.situacao {
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  padding: 4px 8px; border: 2px solid var(--tinta); white-space: nowrap;
}
.situacao[data-s="novo"] { border-style: dashed; border-width: 1px; font-weight: 400; }
.situacao[data-s="andamento"] { background: var(--papel-escuro); }
.situacao[data-s="resolvido"] { background: var(--tinta); color: var(--papel); }
.situacao[data-s="preso"] { background: var(--preso); border-color: var(--preso); color: #FFF8EE; font-family: var(--titulo); font-weight: 400; font-size: 16px; }
.rodape { margin-top: 28px; font-size: 13px; color: var(--tinta-2); }

/* ---------- caso ---------- */
.topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.topo .titulo { font-size: 30px; }
.topo .faixa { font-family: var(--texto); color: var(--tinta-2); font-size: 15px; letter-spacing: 0; }
.estado-linha { margin: 6px 0 10px; font-size: 15px; }
.estado-linha b { font-weight: 700; }

.mesa { display: grid; gap: 14px; }

.parede { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.retrato {
  position: relative; display: flex; flex-direction: column; align-items: stretch;
  min-height: 98px; padding: 4px 4px 5px; text-align: left; cursor: pointer;
  background: var(--papel-claro); border: 1.5px dashed var(--tinta-2); border-radius: 0;
}
.retrato .coord { font-size: 10px; font-weight: 700; letter-spacing: .04em; }
.retrato .inicial { font-family: var(--titulo); font-size: 28px; line-height: 1; text-align: center; margin: 2px 0 3px; }
.retrato .nome { font-size: 11px; font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; hyphens: auto; }
.retrato .oficio { font-size: 10px; line-height: 1.15; color: var(--tinta-2); overflow-wrap: anywhere; hyphens: auto; }
.retrato .selo {
  margin-top: auto; align-self: stretch; text-align: center; white-space: nowrap; overflow: hidden;
  font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
  padding: 1px 0; border: 1.5px solid currentColor;
}
.retrato[data-estado="inocente"] { background: var(--papel-escuro); border: 3px solid var(--tinta); padding: 2.5px 2.5px 3.5px; }
.retrato[data-estado="inocente"] .oficio { color: var(--tinta); }
.retrato[data-estado="culpado"] { background: var(--tinta); color: var(--papel); border: 3px solid var(--tinta); padding: 2.5px 2.5px 3.5px; }
.retrato[data-estado="culpado"] .oficio { color: var(--papel); }
.retrato[data-preso] .selo { background: var(--preso); border-color: var(--preso); color: #FFF8EE; font-family: var(--titulo); font-weight: 400; font-size: 12px; letter-spacing: .04em; }
.retrato .fala { position: absolute; top: 3px; right: 4px; font-size: 10px; line-height: 1; }
.retrato .fala.calado { font-weight: 700; opacity: .75; }
/* destaque: retratos citados pelo depoimento escolhido e o retrato da dica */
.retrato.citada { outline: 3px solid var(--tinta); outline-offset: 2px; }
.retrato.dica { outline: 3px dotted var(--tinta); outline-offset: 2px; }
.retrato.dica::after {
  content: "dica"; position: absolute; top: -9px; right: -6px; font-size: 10px; font-weight: 700;
  background: var(--tinta); color: var(--papel); padding: 0 4px;
}

.barra { display: flex; gap: 8px; flex-wrap: wrap; }
.barra .botao { flex: 1 1 0; }
.aviso { min-height: 1.4em; margin: 8px 0 0; font-style: italic; }

.depoimentos h2 { font-size: 22px; margin-bottom: 6px; }
.lista-dep { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dep {
  width: 100%; text-align: left; cursor: pointer; padding: 8px 10px;
  background: var(--papel-claro); border: 1px solid var(--tinta-2); border-left: 4px solid var(--tinta-2);
}
.dep .quem { display: block; font-size: 13px; font-weight: 700; }
.dep .texto { display: block; margin-top: 2px; }
.dep.calado .texto { font-style: italic; color: var(--tinta-2); }
.dep[aria-pressed="true"] { border-left-width: 10px; border-color: var(--tinta); }
.dep.dica { outline: 3px dotted var(--tinta); outline-offset: 2px; }
.dep .bilhete { display: inline-block; margin-left: 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; border: 1.5px solid var(--tinta); padding: 0 4px; }

/* ---------- folha (bottom sheet) e momentos ---------- */
.veu { position: fixed; inset: 0; background: rgba(21, 19, 16, .45); z-index: 10; }
.folha {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 11;
  max-width: 560px; margin: 0 auto; max-height: 88vh; overflow: auto;
  background: var(--papel); border-top: 3px solid var(--tinta);
  padding: 16px var(--gutter) calc(16px + env(safe-area-inset-bottom));
}
@media (min-width: 900px) {
  .folha { bottom: auto; top: 12vh; border: 3px solid var(--tinta); }
}
.folha h2 { font-size: 26px; }
.folha .oficio { color: var(--tinta-2); margin: 2px 0 10px; }
.folha .fala-grande { margin: 8px 0 12px; font-size: 17px; }
.folha .acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.folha .acoes .largo { grid-column: 1 / -1; }
.recusa { margin: 4px 0 0; padding: 10px; border: 2px solid var(--tinta); font-weight: 700; text-align: center; }
.relatorio-texto {
  width: 100%; min-height: 50vh; font-family: ui-monospace, Menlo, monospace; font-size: 11px; line-height: 1.35;
  background: var(--papel-claro); color: var(--tinta); border: 1px solid var(--tinta); padding: 8px; resize: vertical;
}

.momento {
  position: fixed; inset: 0; z-index: 20; background: var(--papel);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 24px var(--gutter); text-align: center;
}
.carimbo {
  font-family: var(--titulo); font-size: 96px; line-height: 1; color: var(--preso);
  border: 8px solid var(--preso); padding: 6px 18px 10px; transform: rotate(-4deg);
}
.momento .linha { font-size: 19px; max-width: 30ch; }
.momento h2 { font-size: 52px; }

/* ---------- celular: o caso inteiro numa tela, sem rolar a página ----------
 * Cabeçalho numa linha, cartões baixos (sem a inicial; nome e ofício numa
 * linha, cortados com reticências, o nome completo fica na folha), e os
 * depoimentos num painel que ocupa o resto da altura com rolagem própria. */
.so-estreito { display: none; }
@media (max-width: 899px) {
  .so-largo { display: none; }
  .so-estreito { display: inline-flex; }
  main.tela-caso {
    height: 100vh; height: 100dvh; display: flex; flex-direction: column;
    padding: 6px 12px calc(6px + env(safe-area-inset-bottom));
  }
  .tela-caso .topo { flex: none; }
  .tela-caso .topo .titulo { font-size: 22px; white-space: nowrap; }
  .tela-caso .topo .botao { min-height: 40px; padding: 4px 10px; }
  .tela-caso .estado-linha { flex: none; font-size: 13px; line-height: 1.3; margin: 2px 0 6px; }
  .tela-caso .mesa { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
  .tela-caso .lado-parede { flex: none; }
  .tela-caso .parede { gap: 4px; }
  .tela-caso .retrato { min-height: 0; height: 62px; padding: 3px 3px 4px; }
  .tela-caso .retrato:not([data-estado="livre"]) { padding: 1.5px 1.5px 2.5px; }
  .tela-caso .retrato .inicial { display: none; }
  .tela-caso .retrato .coord { margin-bottom: 1px; }
  .tela-caso .retrato .nome, .tela-caso .retrato .oficio {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; hyphens: none; overflow-wrap: normal;
  }
  .tela-caso .retrato .nome { font-size: 10.5px; }
  .tela-caso .retrato .oficio { font-size: 9.5px; }
  .tela-caso .aviso { min-height: 0; margin: 4px 0; font-size: 13px; }
  .tela-caso .aviso:empty { display: none; }
  .tela-caso .barra { margin-top: 6px; }
  .tela-caso .barra .botao { min-height: 40px; padding: 4px 10px; }
  .tela-caso .depoimentos { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .tela-caso .depoimentos h2 { flex: none; font-size: 17px; margin-bottom: 4px; }
  .tela-caso .lista-dep { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; gap: 4px; }
  .tela-caso .dep { padding: 5px 8px; }
  .tela-caso .dep .quem { font-size: 12px; }
  .tela-caso .dep .texto { font-size: 14px; line-height: 1.3; }
}

/* ---------- computador ---------- */
@media (min-width: 900px) {
  main { padding-top: 20px; }
  .mesa { grid-template-columns: minmax(560px, 680px) minmax(0, 1fr); gap: 28px; align-items: start; }
  .parede { gap: 10px; }
  .retrato { min-height: 128px; padding: 6px; }
  .retrato:not([data-estado="livre"]) { padding: 4.5px; }
  .retrato .coord { font-size: 12px; }
  .retrato .inicial { font-size: 40px; }
  .retrato .nome { font-size: 14px; }
  .retrato .oficio { font-size: 12px; }
  .retrato .selo { font-size: 11px; }
  .depoimentos { max-height: calc(100vh - 140px); overflow: auto; padding-right: 4px; }
  .marca { font-size: 88px; }
  .lista-casos { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
}