.audit {
  --audit-square: var(--browne-title);
  --audit-base: var(--browne-parchment);
}
.audit[data-background="dark"] {
  --audit-square: var(--browne-words);
  --audit-base: var(--browne-code);
}
.audit[data-background="plain"] {
  --audit-square: var(--browne-parchment);
  --audit-base: var(--browne-parchment);
}
.audit .checker {
  background-color: var(--audit-base);
  background-image: conic-gradient(
    var(--audit-square) 25%, transparent 0 50%,
    var(--audit-square) 0 75%, transparent 0
  );
  background-size: 20px 20px;
}
.audit-card {
  padding: 1rem 0;
  border-top: 1px solid var(--browne-boundary);
  scroll-margin-top: 1rem;
}
.audit-card h4 { margin: .2rem 0; }
.audit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(195px, 1fr));
  gap: .8rem;
}
.audit-grid figure { min-width: 0; margin: 0; padding: 0; }
.audit-grid figcaption {
  font-size: .85rem;
  line-height: 1.5;
  color: var(--browne-words);
}
.audit-stage {
  display: block;
  padding: 0;
  width: 100%;
  height: 200px;
  cursor: zoom-in;
  overflow: hidden;
}
.audit-stage img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.audit small { display: block; overflow-wrap: anywhere; }
.audit .toolbar select { max-width: 100%; }
.audit-toolbar {
  padding: .5rem;
  border: 1px solid var(--browne-boundary);
  background: var(--browne-title);
}
.audit-jumps { display: flex; flex-wrap: wrap; gap: .5rem 1rem; }
.audit-jumps a { font-size: .9rem; }
.audit-overlay { max-width: 350px; margin: 1rem auto; }
.audit-overlay canvas { width: 100%; display: block; }
.audit-dialog {
  width: min(1100px, calc(100vw - 2rem));
  max-width: calc(100vw - 2rem);
  max-height: calc(100dvh - 2rem);
  box-sizing: border-box;
  padding: 1rem;
  color: var(--browne-words);
  background: var(--browne-parchment);
  border: 1px solid var(--browne-boundary);
}
.audit-dialog::backdrop {
  background: color-mix(in srgb, var(--browne-words) 75%, transparent);
}
.audit-dialog h3 { margin: 0; }
.audit-viewport {
  overflow: auto;
  height: 65vh;
  width: 100%;
  border: 1px solid var(--browne-boundary);
}
.audit-viewport img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.audit-viewport.actual img {
  width: auto;
  height: auto;
  max-width: none;
  image-rendering: pixelated;
}
@media (max-width: 550px) {
  .audit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .audit-stage { height: 175px; }
  .audit-dialog { padding: .6rem; }
  .audit-viewport { height: 45vh; }
}