/* Per-post styling for code-review-at-agent-speed. Written against the
   theme tokens, so both halves of the light/dark pair follow the toggle. */

/* Mermaid paints the box behind an edge label (the labelBkg div and the <p>
   inside it) in its own default grey, which ignores the theme and leaves
   light text on a light box in dark mode. Use the token. The diagram's own
   rules are scoped by element id, so these need !important to win. */
svg.mermaid-js .labelBkg,
svg.mermaid-js .edgeLabel,
svg.mermaid-js .edgeLabel p {
  background-color: var(--mermaid-label-bg-color) !important;
  color: var(--mermaid-label-fg-color) !important;
}

/* Long inline code (package names, commands) breaks instead of pushing the
   page wider than a phone. */
main :not(pre) > code {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 767.98px) {
  /* Wide tables scroll inside their own box, not the page. */
  main table {
    display: block;
    overflow-x: auto;
  }

  /* The side-by-side AGENTS.md / REVIEW.md listing stacks on a phone. */
  .columns {
    display: block;
  }
  .columns > .column {
    width: 100% !important;
  }
}