/* PaperPulse - folha unica, sem build, sem framework.
   O painel e denso de proposito: quem opera o sistema olha numeros, nao herois
   visuais. Tudo o que e quantidade sai em tabular-nums para as colunas alinharem. */

:root {
  color-scheme: light dark;
  --bg: #f6f7f9;
  --panel: #ffffff;
  --panel-2: #fbfcfd;
  --ink: #14181f;
  --ink-soft: #5b6572;
  --ink-faint: #8b95a3;
  --line: #dfe3e9;
  --line-soft: #eceff3;
  --accent: #2b5bd7;
  --accent-soft: #e8eeff;
  --ok: #1f7a4d;
  --ok-soft: #e4f4ec;
  --warn: #9a6400;
  --warn-soft: #fdf1d9;
  --err: #b02a2a;
  --err-soft: #fbe9e9;
  --mark-alto: #ffd0cc;
  --mark-medio: #ffe7b8;
  --mark-baixo: #e6ecf7;
  /* Grifo sobre a folha renderizada. Fica FORA da troca de tema, e nao por
     descuido: a pagina do PDF e branca nos dois temas, entao o grifo e sempre
     lido sobre papel branco. Reusar --mark-* aqui pintaria, no tema escuro,
     marrom sobre branco. Translucido para nao cobrir o texto que ele aponta. */
  --folha-alto: rgb(255 82 66 / 30%);
  --folha-medio: rgb(255 176 32 / 34%);
  --folha-baixo: rgb(64 124 232 / 22%);
  --folha-ia: rgb(150 88 230 / 26%);
  --radius: 8px;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101318;
    --panel: #171b22;
    --panel-2: #1c212a;
    --ink: #e7ebf1;
    --ink-soft: #9aa5b4;
    --ink-faint: #6b7686;
    --line: #2a313c;
    --line-soft: #222831;
    --accent: #7ea2ff;
    --accent-soft: #1d2740;
    --ok: #63c493;
    --ok-soft: #16301f;
    --warn: #e0ac4a;
    --warn-soft: #33280f;
    --err: #f08b8b;
    --err-soft: #351b1b;
    --mark-alto: #5c2b28;
    --mark-medio: #4d3a15;
    --mark-baixo: #24303f;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code, .mono, .num { font-family: var(--mono); }
.num { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ layout */
.topbar {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 24px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 10;
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--ink);
  padding: 14px 0;
}
.brand:hover { text-decoration: none; }
.brand .pulse { color: var(--accent); }
.brand small { color: var(--ink-faint); font-weight: 400; font-size: 11px; }

/* Marca da instituicao. Discreta de proposito: e orientacao, nao navegacao -
   nao ha para onde ir a partir dela. */
.topbar .inst {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 3px 7px;
  margin-left: -14px;
  max-width: 18ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar nav { display: flex; gap: 2px; flex-wrap: wrap; }
.topbar nav a {
  padding: 15px 12px 13px;
  color: var(--ink-soft);
  border-bottom: 2px solid transparent;
  font-size: 14px;
}
.topbar nav a:hover { color: var(--ink); text-decoration: none; }
.topbar nav a.on { color: var(--ink); border-bottom-color: var(--accent); font-weight: 550; }
.topbar .spacer { margin-left: auto; }
.topbar .api-link { font-size: 13px; color: var(--ink-faint); }
.topbar .quem {
  font-size: 12.5px;
  color: var(--ink-soft);
  max-width: 20ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Procedencia de uma fonte no relatorio: veio do acervo publicado ou de outra
   submissao desta instituicao. Discreta porque e qualificador do titulo, nao
   entrada de navegacao - mas visivel, porque muda o encaminhamento. */
.data .proc {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border: 1px solid var(--line);
  border-radius: 3px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  vertical-align: 1px;
  white-space: nowrap;
}
.data .proc-nota { font-style: italic; }

/* --------------------------------------------------------------- entrada */
/* Tela de login: uma caixa centrada, sem barra de navegacao - os links dela
   levariam de volta para o proprio login. */
body.entrada {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
}
.entrada-caixa { width: 100%; max-width: 380px; }
.entrada-caixa .card { padding: 28px 26px; }
.entrada-caixa .marca { font-size: 22px; font-weight: 650; letter-spacing: -0.02em; }
.entrada-caixa .marca .pulse { color: var(--accent); }
.entrada-caixa .notice { margin-bottom: 16px; }

/* Atalho de PP_DEV_LOGIN. Deliberadamente discreto: botao fantasma e nota em
   texto fraco, para que o caminho com senha continue sendo o que a tela sugere. */
.atalho-dev { margin-top: 18px; }
.atalho-dev .ou {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  color: var(--ink-faint);
  font-size: 12px;
}
.atalho-dev .ou::before,
.atalho-dev .ou::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

main { max-width: 1180px; margin: 0 auto; padding: 26px 24px 72px; }

.page-head { margin-bottom: 22px; }
.page-head h1 { margin: 0 0 4px; font-size: 22px; letter-spacing: -0.02em; }
.page-head p { margin: 0; color: var(--ink-soft); font-size: 14px; max-width: 68ch; }

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 18px;
}
.card > h2 {
  margin: 0 0 14px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-faint);
  font-weight: 600;
}
.card > h2 .right { float: right; text-transform: none; letter-spacing: 0; }

.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; }
.cols-wide { display: grid; grid-template-columns: 1.6fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 860px) {
  .cols, .cols-3, .cols-wide { grid-template-columns: 1fr; }
  main { padding: 18px 14px 60px; }
}

/* ------------------------------------------------------------------- stats */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); }
.stats > div { background: var(--panel); padding: 14px 16px; }
.stats .v {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 24px;
  letter-spacing: -0.02em;
}
.stats .k { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); }
@media (max-width: 700px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* ------------------------------------------------------------------ tabela */
table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  font-weight: 600;
  padding: 0 10px 7px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
table.data td { padding: 9px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
table.data tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover td { background: var(--panel-2); }
table.data td.n, table.data th.n {
  text-align: right;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
table.data td.title { font-weight: 500; }
.sub { color: var(--ink-soft); font-size: 12.5px; }
.faint { color: var(--ink-faint); }
.empty { color: var(--ink-faint); padding: 18px 2px; font-size: 14px; }

/* ------------------------------------------------------------------ badges */
.badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 99px;
  font-size: 11.5px;
  font-weight: 550;
  border: 1px solid transparent;
  white-space: nowrap;
}
.badge.ok { background: var(--ok-soft); color: var(--ok); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.err { background: var(--err-soft); color: var(--err); }
.badge.muted { background: var(--line-soft); color: var(--ink-soft); }
.badge.accent { background: var(--accent-soft); color: var(--accent); }

/* ----------------------------------------------------------------- formularios */
.field { margin-bottom: 14px; }
.field > label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 5px;
}
.field .help { font-size: 12px; color: var(--ink-faint); margin-top: 4px; }

input[type="text"], input[type="search"], input[type="number"], textarea, select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-2);
  color: var(--ink);
  font: inherit;
}
textarea { resize: vertical; min-height: 150px; font-family: var(--mono); font-size: 13px; line-height: 1.6; }
input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  border-color: var(--accent);
}
input[type="file"] { font: inherit; color: var(--ink-soft); }

.inline { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.inline .field { margin-bottom: 0; }
.inline .grow { flex: 1 1 220px; }
.inline .narrow { width: 120px; }

.check { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-soft); }
.check input { width: auto; }

button, .button {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-weight: 550;
  cursor: pointer;
  white-space: nowrap;
}
button:hover { filter: brightness(1.08); }
button.ghost, .button.ghost {
  background: transparent;
  color: var(--ink-soft);
  border-color: var(--line);
}
button.ghost:hover { color: var(--ink); border-color: var(--ink-faint); filter: none; }
button:disabled { opacity: 0.5; cursor: not-allowed; }

/* Parar a coleta e destrutivo o bastante para nao parecer o botao ao lado, e
   reversivel o bastante para nao virar um alerta vermelho permanente. */
button.stop, .button.stop {
  background: transparent;
  color: var(--err);
  border-color: var(--err);
}
button.stop:hover { background: var(--err-soft); filter: none; }
button.tiny, .button.tiny { padding: 4px 10px; font-size: 12px; }

/* --------------------------------------------------------------------- abas */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.tabs label {
  padding: 8px 14px;
  font-size: 13.5px;
  font-weight: 550;
  color: var(--ink-soft);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tabs label:hover { color: var(--ink); }
.tab-toggle { position: absolute; opacity: 0; pointer-events: none; }
.tab-panel { display: none; }
#tab-a:checked ~ .tabs label[for="tab-a"],
#tab-b:checked ~ .tabs label[for="tab-b"] { color: var(--ink); border-bottom-color: var(--accent); }
#tab-a:checked ~ .tab-panels > .panel-a,
#tab-b:checked ~ .tab-panels > .panel-b { display: block; }

/* ------------------------------------------------------------------ medidor */
.meter { height: 7px; background: var(--line-soft); border-radius: 99px; overflow: hidden; }
.meter > span { display: block; height: 100%; background: var(--accent); transition: width .6s ease-out; }
.meter.alto > span { background: var(--err); }
.meter.medio > span { background: var(--warn); }
.meter.baixo > span { background: var(--ok); }

/* Variante compacta, para caber ao lado de um numero em celula de tabela. */
.meter-mini {
  display: inline-block; width: 54px; height: 5px; margin-left: 8px;
  background: var(--line-soft); border-radius: 99px; overflow: hidden; vertical-align: middle;
}
.meter-mini > span { display: block; height: 100%; background: var(--accent); transition: width .6s ease-out; }
.meter-mini.err > span { background: var(--err); }
.meter-mini.warn > span { background: var(--warn); }
.meter-mini.ok > span { background: var(--ok); }

/* Divergente, para o z-score do detector de IA: cresce do centro para um dos
   lados, entao so a LARGURA precisa animar (a mesma logica de .meter-mini). */
.meter-z {
  position: relative; display: inline-block; width: 60px; height: 6px; margin-left: 8px;
  background: var(--line-soft); border-radius: 99px; overflow: hidden; vertical-align: middle;
}
.meter-z::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--line); }
.meter-z .fill { position: absolute; top: 0; height: 100%; width: 0; transition: width .6s ease-out; }
.meter-z .fill.maquina { left: 50%; background: var(--warn); }
.meter-z .fill.humano { right: 50%; background: var(--ok); }

.headline {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 6px;
}
.headline .big {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.03em;
}
.headline .big.alto { color: var(--err); }
.headline .big.medio { color: var(--warn); }
.headline .big.baixo { color: var(--ok); }

/* ------------------------------------------------- texto marcado (relatorio) */
.marked {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 16px 18px;
  max-height: 460px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.75;
}
.marked mark {
  background: var(--mark-baixo);
  color: inherit;
  border-radius: 3px;
  padding: 1px 0;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.marked mark.alto { background: var(--mark-alto); }
.marked mark.medio { background: var(--mark-medio); }
.legend { display: flex; gap: 14px; font-size: 12px; color: var(--ink-soft); margin-top: 10px; flex-wrap: wrap; }
.legend i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.legend .alto { background: var(--mark-alto); }
.legend .medio { background: var(--mark-medio); }
.legend .baixo { background: var(--mark-baixo); }

/* --------------------------------------------- paginas marcadas (relatorio)
   O grifo em cima da folha renderizada. Os retangulos chegam do servidor em
   PORCENTAGEM da pagina (ver web/pdfmark.py), e e isso que faz o overlay
   funcionar sem JavaScript: a imagem escala com a largura do card e as marcas
   escalam junto, porque estao presas ao mesmo sistema de coordenadas. */
.folhas { max-height: 78vh; overflow-y: auto; background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: 14px; }
.folha { margin: 0 0 18px; }
.folha:last-child { margin-bottom: 0; }
.folha figcaption { font-size: 12px; color: var(--ink-faint); text-align: center; padding-top: 6px; }
/* `position:relative` aqui e o ancoradouro das marcas - sem ele elas se
   posicionariam contra a pagina inteira. Mesmo padrao de .dica/.dica-pop. */
.folha-img { position: relative; line-height: 0; box-shadow: 0 1px 6px rgb(16 19 24 / 16%); }
.folha-img img { display: block; width: 100%; height: auto; }
.marca { position: absolute; z-index: 1; border-radius: 2px; cursor: help; }
.marca.alto { background: var(--folha-alto); }
.marca.medio { background: var(--folha-medio); }
.marca.baixo { background: var(--folha-baixo); }
.marca.ia { background: var(--folha-ia); }
.marca:hover { outline: 1px solid var(--accent); }

/* Filtro sem JS, na mesma tecnica das abas de check.html: o radio guarda o
   estado e o combinador ~ alcanca as marcas. */
#marca-tudo:checked ~ .tabs label[for="marca-tudo"],
#marca-sim:checked ~ .tabs label[for="marca-sim"],
#marca-ia:checked ~ .tabs label[for="marca-ia"] { color: var(--ink); border-bottom-color: var(--accent); }
#marca-sim:checked ~ .folhas .marca.m-ia,
#marca-ia:checked ~ .folhas .marca.m-similaridade { display: none; }

/* A amostra da legenda mostra a cor COMPOSTA sobre papel branco - que e como
   ela aparece na folha. Sobre o fundo do card, translucida, ela mentiria. */
.legend-folha i { background-color: #fff; }
.legend-folha .alto { background-image: linear-gradient(var(--folha-alto), var(--folha-alto)); }
.legend-folha .medio { background-image: linear-gradient(var(--folha-medio), var(--folha-medio)); }
.legend-folha .baixo { background-image: linear-gradient(var(--folha-baixo), var(--folha-baixo)); }
.legend-folha .ia { background-image: linear-gradient(var(--folha-ia), var(--folha-ia)); }

details.seg { border-top: 1px solid var(--line-soft); padding: 9px 0; }
details.seg > summary { cursor: pointer; font-size: 13.5px; list-style: none; display: flex; gap: 10px; align-items: baseline; }
details.seg > summary::-webkit-details-marker { display: none; }
details.seg > summary::before { content: "▸"; color: var(--ink-faint); font-size: 11px; }
details.seg[open] > summary::before { content: "▾"; }
details.seg .quote {
  margin: 8px 0 0 18px;
  padding-left: 12px;
  border-left: 2px solid var(--line);
  color: var(--ink-soft);
  font-size: 13px;
  font-family: var(--mono);
  line-height: 1.6;
}

/* --------------------------------------------------- dicas (ajuda no item)
   A explicacao de cada fila e de cada coluna mora num popover ancorado ao
   proprio item, nao num bloco embaixo da tabela. Duas razoes: explicacao longe
   do dado nao e lida, e explicacao empilhada embaixo dele cobra tela de todo
   mundo - inclusive de quem ja entende o painel.

   `position:absolute` no popover e o que faz a promessa valer: ele sai do
   fluxo, entao abrir uma dica nao empurra a tabela nem muda a altura do card. */
.dica { position: relative; display: inline-block; font-weight: inherit; }
.dica > summary {
  cursor: help;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-bottom: 1px dotted var(--ink-faint);
}
.dica > summary::-webkit-details-marker { display: none; }

/* O "?" e a unica marca de que ha ajuda ali - discreto o bastante para nao
   competir com o numero da celula, visivel o bastante para ser procurado. */
.dica > summary::after {
  content: "?";
  display: inline-grid;
  place-items: center;
  width: 13px;
  height: 13px;
  border: 1px solid var(--line);
  border-radius: 99px;
  font: 600 9px/1 var(--sans);
  color: var(--ink-faint);
  background: var(--panel);
}
.dica > summary:hover { color: var(--accent); border-bottom-color: var(--accent); }
.dica > summary:hover::after { color: var(--accent); border-color: var(--accent); }
.dica[open] > summary { color: var(--accent); border-bottom-color: var(--accent); }
/* Texto na cor do painel, e nao branco fixo: no tema escuro o accent e claro,
   e branco sobre ele sumiria. */
.dica[open] > summary::after {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--panel);
}

.dica-pop {
  position: absolute;
  z-index: 50;
  top: calc(100% + 9px);
  left: 0;
  width: min(430px, 86vw);
  padding: 13px 15px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgb(16 19 24 / 18%);
  /* O popover herda de <th> e de <h2>, que sao caixa alta, espacados e sem
     quebra de linha. Sem estes resets o texto sairia gritando numa linha so. */
  font: 400 13px/1.62 var(--sans);
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  white-space: normal;
  color: var(--ink-soft);
  cursor: auto;
}
/* Nas colunas numericas o popover ancora pela borda direita: sao colunas
   estreitas na metade direita da tabela, e alinhado a esquerda ele sairia da
   tela. */
.dica-e .dica-pop { left: auto; right: 0; }

.dica-tit { margin: 0 0 9px; padding-bottom: 8px; border-bottom: 1px solid var(--line-soft); }
.dica-tit b { color: var(--ink); font-weight: 600; font-size: 13.5px; }
.dica-tit span { display: block; margin-top: 3px; color: var(--ink-soft); font-size: 12.5px; }
.dica-pop p { margin: 0 0 8px; }
.dica-pop p:last-child { margin-bottom: 0; }
.dica-pop b { color: var(--ink); font-weight: 600; }
.dica-pop code { font-size: 12px; }
.guia-nota {
  border-left: 2px solid var(--line);
  padding-left: 11px;
  color: var(--ink-faint) !important;
}

/* ------------------------------------------------------------------- avisos */
.notice {
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: 6px;
  padding: 11px 14px;
  font-size: 14px;
  margin-bottom: 14px;
  background: var(--panel-2);
}
.notice.ok { border-left-color: var(--ok); background: var(--ok-soft); color: var(--ok); }
.notice.err { border-left-color: var(--err); background: var(--err-soft); color: var(--err); }
.notice.info { border-left-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.notice.warn { border-left-color: var(--warn); background: var(--warn-soft); color: var(--warn); }
.notice .hint { display: block; margin-top: 4px; font-size: 12.5px; opacity: 0.85; }

/* ------------------------------------------------------------------- listas */
dl.meta { display: grid; grid-template-columns: 150px 1fr; gap: 7px 16px; margin: 0; font-size: 14px; }
dl.meta dt { color: var(--ink-faint); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; padding-top: 2px; }
dl.meta dd { margin: 0; word-break: break-word; }
@media (max-width: 640px) { dl.meta { grid-template-columns: 1fr; gap: 2px 0; } dl.meta dd { margin-bottom: 8px; } }

pre.cite {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px 14px;
  margin: 0;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 2px 10px;
  font-size: 12.5px;
  color: var(--ink-soft);
}
.chip b { color: var(--ink); font-weight: 600; }

/* Lista de autoria: numerada porque a ordem de assinatura e informacao. */
ol.autores { margin: 0; padding-left: 20px; }
ol.autores li { margin-bottom: 12px; }
ol.autores li::marker { color: var(--ink-faint); font-size: 12px; }
ol.autores .title { font-weight: 550; }

/* ------------------------------------------------------------------ z-score */
.z { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.z.out { color: var(--err); font-weight: 600; }
.range { position: relative; height: 18px; min-width: 120px; }
.range .band {
  position: absolute; top: 7px; height: 4px;
  background: var(--accent-soft); border-radius: 2px;
}
.range .dot {
  position: absolute; top: 4px; width: 10px; height: 10px; margin-left: -5px;
  border-radius: 50%; background: var(--accent); border: 2px solid var(--panel);
}
.range .dot.out { background: var(--err); }

/* --------------------------------------------------------------- indicadores */
.htmx-indicator { opacity: 0; transition: opacity 120ms; font-size: 13px; color: var(--ink-faint); }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }
.htmx-request button[type="submit"] { opacity: 0.6; pointer-events: none; }

/* Barra de espera INDETERMINADA: a consulta e uma unica requisicao sincrona,
   sem passos com fracao conhecida, entao fingir um percentual seria mentir.
   Uma unica regra aqui cobre as 9 telas que ja usam .htmx-indicator. */
.htmx-indicator::before {
  content: ""; display: inline-block; vertical-align: middle; margin-right: 8px;
  width: 34px; height: 4px; border-radius: 99px;
  background: linear-gradient(90deg, transparent 0%, var(--accent) 50%, transparent 100%);
  background-size: 300% 100%;
  animation: pp-loadbar 1s linear infinite;
}
@keyframes pp-loadbar {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

footer.foot {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px 40px;
  color: var(--ink-faint);
  font-size: 12.5px;
}

/* --------------------------------------------------------------- integridade
   O veredito e uma decisao, e a tela precisa parecer uma: as notas sao a
   justificativa em linguagem corrente, e a tabela de camadas mostra o caminho
   que levou ate ela. Nada aqui e decorativo - a cor de cada linha e o unico
   jeito de varrer dez camadas com o olho e achar as duas que acenderam. */
ul.notas {
  margin: 14px 0 0;
  padding: 0 0 0 18px;
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.55;
}
ul.notas li { margin-bottom: 4px; }
ul.notas li::marker { color: var(--ink-faint); }

table.camadas tr.camada.alerta td { background: var(--err-soft); }
table.camadas tr.camada.atencao td { background: var(--warn-soft); }
table.camadas tr.camada.indisponivel td { color: var(--ink-faint); }
table.camadas td.title { white-space: nowrap; }

.stats .v.grave { color: var(--err); }
.stats .v.alerta { color: var(--warn); }