/* Dossier (A): evidence pages. A case file: ruled paper, a margin rule, file header line,
   rubber stamps, redaction bars and typewriter-mono metadata. */

.dossier {
  background-color: var(--bg);
  color: var(--fg);
  /* the ruling is a texture (one line every 28px, matching the body leading), not a decorative gradient */
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0 calc(var(--ruling) - 1px),
    rgb(21 26 20 / 0.075) calc(var(--ruling) - 1px) var(--ruling)
  );
  background-position: 0 calc(var(--s-6) - 6px);
}

/* the sheet: content sits right of a double red margin rule */
.dossier__sheet {
  --margin-gap: 1rem;
  position: relative;
  padding-block: var(--s-5) var(--s-8);
  padding-left: calc(var(--gutter) + var(--margin-gap));
}
.dossier__sheet::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--gutter) + var(--margin-gap) * 0.35);
  width: 4px;
  border-left: 1px solid rgb(227 6 19 / 0.42);
  border-right: 1px solid rgb(227 6 19 / 0.42);
  pointer-events: none;
}
@media (min-width: 62rem) {
  .dossier__sheet { --margin-gap: 4.5rem; padding-top: var(--s-6); }
  .dossier__sheet::before { left: calc(var(--gutter) + 2.25rem); }
}
.dossier p:not([class]) { max-width: var(--measure); }

/* ------------------------------------------------------------------ file header line
   <p class="dossier__header"><span class="dossier__tab">Dossiê público</span><span>Processo: VPCM 10/2026</span>…</p>
   (plain text inside also works) */
.dossier__header {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  max-width: none;
  margin: 0 0 var(--s-6);
  border-top: 2px solid var(--ink-900);
  border-bottom: var(--rule) solid var(--ink-900);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.4;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-900);
}
.dossier__header > * {
  padding: 0.5rem 0.75rem 0.45rem;
  border-right: var(--rule) solid var(--paper-300);
}
.dossier__header > :last-child { border-right: 0; }
@media (max-width: 47.99rem) {
  .dossier__header { padding-bottom: 0.35rem; }
  .dossier__header > * { padding: 0.4rem 0.75rem 0 0; border-right: 0; }
  .dossier__tab { flex-basis: 100%; margin-bottom: 0.15rem; padding-left: 0.75rem; clip-path: polygon(0 0, 13rem 0, 14rem 100%, 0 100%); }
}
.dossier__tab {
  margin-top: -2px;
  padding-right: 1.6rem !important;
  background: var(--ink-900);
  color: var(--paper-50);
  font-weight: 600;
  clip-path: polygon(0 0, calc(100% - 0.9rem) 0, 100% 100%, 0 100%);
  border-right: 0 !important;
}

/* title block with an optional stamp */
.dossier__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--s-4) var(--s-6);
  margin-bottom: var(--s-5);
}
.dossier__title {
  max-width: 18ch;
  margin: 0;
  font-size: var(--display-2);
  line-height: 0.88;
}
.dossier__lede {
  max-width: var(--measure);
  font-size: var(--text-md);
  line-height: var(--ruling);
}
/* wide screens: the stamp is struck across the file line, top right of the sheet */
@media (min-width: 62rem) {
  .dossier__head { position: relative; padding-right: 15rem; }
  .dossier__head .stamp { position: absolute; top: -3.6rem; right: var(--s-7); font-size: 1.5rem; }
}

/* ------------------------------------------------------------------ rubber stamp
   <p class="stamp">Sem AIA</p> */
.stamp {
  display: inline-block;
  max-width: none;
  margin: 0;
  padding: 0.55em 0.85em 0.5em;
  border: 3px solid currentColor;
  box-shadow: inset 0 0 0 2px var(--paper-100), inset 0 0 0 3.5px currentColor;
  color: var(--red-600);
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: rotate(-6deg);
  -webkit-mask-image: url("/img/stamp-grain.svg");
  mask-image: url("/img/stamp-grain.svg");
  -webkit-mask-size: 180px 180px;
  mask-size: 180px 180px;
  mix-blend-mode: multiply;
  user-select: none;
}
.stamp--ink { color: var(--ink-900); }
.poster .stamp { mix-blend-mode: normal; box-shadow: inset 0 0 0 2px var(--bg), inset 0 0 0 3.5px currentColor; color: var(--red-300); }

/* ------------------------------------------------------------------ redaction bar
   <span class="redact">não divulgado</span> — the text stays for screen readers, invisible on screen */
.redact {
  display: inline-block;
  min-width: 5ch;
  padding: 0 0.2em;
  background: var(--ink-900);
  color: transparent;
  line-height: 1.05;
  vertical-align: -0.08em;
  user-select: none;
  clip-path: polygon(0 10%, 18% 2%, 46% 8%, 71% 0, 100% 6%, 99% 90%, 74% 100%, 41% 93%, 16% 99%, 1% 92%);
}
.redact::selection { background: transparent; color: transparent; }
.poster .redact { background: var(--paper-50); }

/* ------------------------------------------------------------------ "NÃO DIVULGADO" tag
   <span class="tag-unknown">Não divulgado</span> */
.tag-unknown {
  display: inline-block;
  padding: 0.28em 0.5em 0.2em;
  border: 1.5px solid currentColor;
  color: var(--red-700);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  font-stretch: normal;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: 0.12em;
  white-space: nowrap;
}
.poster .tag-unknown {
  border-color: var(--paper-50);
  background: var(--paper-50);
  color: var(--green-900);
}

/* lime on paper fails contrast, so on paper it becomes a highlighter mark */
.dossier .lime {
  color: inherit;
  box-shadow: inset 0 -0.32em 0 var(--lime-400);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ------------------------------------------------------------------ facts table
   <table class="facts-table"><tr><th scope="row">Promotor</th><td>…</td></tr></table>
   or <dl class="facts-table"><div><dt>…</dt><dd>…</dd></div></dl> */
.facts-table {
  width: 100%;
  margin: 0 0 var(--s-6);
  border-collapse: collapse;
  border-top: 2px solid var(--fg);
}
.facts-table th,
.facts-table td,
.facts-table dt,
.facts-table dd {
  margin: 0;
  padding: 0.7rem 0.75rem 0.6rem 0;
  border-bottom: var(--rule) solid var(--rule-color);
  text-align: left;
  vertical-align: baseline;
}
.facts-table th,
.facts-table dt {
  width: 34%;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.facts-table td,
.facts-table dd { font-size: var(--text-base); line-height: 1.45; }
dl.facts-table > div { display: grid; grid-template-columns: minmax(7rem, 34%) minmax(0, 1fr); }
dl.facts-table dt { width: auto; }
.facts-table__n {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: var(--display-stretch);
  font-size: var(--display-4);
  line-height: 0.95;
  text-transform: none;
}
.facts-table__n--alarm { color: var(--alarm); }

/* ------------------------------------------------------------------ timeline
   <ol class="timeline"><li><time datetime="2026-06-19">19 jun 2026</time><p>…</p></li></ol> */
.timeline {
  position: relative;
  margin: 0 0 var(--s-6) 0.4rem;
  padding: 0;
  list-style: none;
  border-left: 2px solid var(--fg);
}
.timeline > li {
  position: relative;
  padding: 0 0 var(--s-5) var(--s-5);
}
.timeline > li:last-child { padding-bottom: 0; }
.timeline > li::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 0.3rem;
  width: 12px;
  height: 12px;
  background: var(--bg);
  border: 2px solid var(--fg);
}
.timeline time,
.timeline__date {
  display: block;
  margin-bottom: var(--s-1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
}
.timeline p { margin: 0; }
.timeline__item--key::before { background: var(--red-600) !important; border-color: var(--red-600) !important; }
.timeline__item--next::before { border-style: dashed !important; }
.timeline__item--next { color: var(--fg-muted); }

/* ------------------------------------------------------------------ document list
   <ul class="doclist"><li><a href="…">[icon document]<span class="doclist__title">…</span><span class="doclist__meta">PDF · 19.06.2026</span></a></li></ul> */
.doclist {
  margin: 0 0 var(--s-6);
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--fg);
}
.doclist > li { border-bottom: var(--rule) solid var(--rule-color); }
.doclist a {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr) auto;
  column-gap: var(--s-3);
  align-items: start;
  padding: var(--s-3) 0;
  color: inherit;
  text-decoration: none;
}
.doclist a > .icon:first-child {
  grid-row: span 2;
  width: 1.4rem;
  height: 1.4rem;
  margin-top: 0.1rem;
  color: var(--accent);
}
.doclist a > .icon:last-child:not(:first-child) { grid-column: 3; grid-row: 1; width: 1rem; height: 1rem; margin-top: 0.3rem; }
.doclist__title {
  grid-column: 2;
  font-weight: 650;
  line-height: 1.35;
  text-decoration: underline transparent 1px;
  text-underline-offset: 0.2em;
}
.doclist a:hover .doclist__title { text-decoration-color: currentColor; }
.doclist__meta {
  grid-column: 2;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--fg-muted);
}

/* two columns on wide screens (facts | timeline) */
.dossier__cols {
  display: grid;
  gap: var(--s-6) var(--s-8);
  margin-top: var(--s-7);
}
@media (min-width: 62rem) {
  .dossier__cols { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}