/* This site's own classes, on top of the OsakaNights theme in
   docs-site/theme/osakanights/, whose stylesheet loads first and supplies
   the --on-* tokens these rules use. Brand-generic rules belong there. */

/* ── Badges for rule metadata ───────────────────────────────────────── */
.ml-badge {
  display: inline-block;
  padding: 0.05rem 0.5rem;
  margin-right: 0.3rem;
  border: 1px solid var(--on-card-border);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}
.ml-badge--fix {
  border-color: var(--on-pass);
  color: var(--on-pass);
}
.ml-badge--nofix {
  border-color: var(--on-fail);
  color: var(--on-fail);
}

/* ── Before and after panels ────────────────────────────────────────── */
.md-typeset .grid.ml-compare > div {
  border: 1px solid var(--on-card-border);
  border-radius: 12px;
  padding: 0 0.8rem 0.4rem;
}
.md-typeset .ml-caption {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0.6rem 0 0;
}
.md-typeset .ml-caption--before {
  color: var(--on-fail);
}
.md-typeset .ml-caption--after {
  color: var(--on-pass);
}

/* ── Diagrams ───────────────────────────────────────────────────────── */
/* The theme puts Material-drawn diagrams on --on-diagram-bg, the canvas the
   mkdocs-material profile scores against, so what the linter passes is what a
   reader sees. A GitHub-style diagram keeps GitHub's white page behind it in
   both site themes, so its colours read as written. */
.md-typeset .grid.ml-compare .mermaid,
.md-typeset .mermaid-github {
  text-align: center;
}
.md-typeset .mermaid-github {
  background: #ffffff;
  border-radius: 12px;
  padding: 0.6rem;
  margin: 0.6rem 0;
}

/* Long report lines wrap rather than scroll inside a narrow card or a callout. */
.md-typeset .grid.ml-compare pre code,
.md-typeset .admonition.failure pre code {
  white-space: pre-wrap;
  word-break: break-word;
}