/* Some Clang pages use red/green comparison tables for bad and corrected code.
   Keep the surfaces theme-aware so Pygments colors stay readable. */
body {
  --clang-code-comparison-bad-background: #fff1f1;
  --clang-code-comparison-bad-border: #d73a49;
  --clang-code-comparison-good-background: #eef9ee;
  --clang-code-comparison-good-border: #2da44e;
}

body[data-theme="dark"] {
  --clang-code-comparison-bad-background: rgba(248, 81, 73, 0.16);
  --clang-code-comparison-bad-border: #f85149;
  --clang-code-comparison-good-background: rgba(63, 185, 80, 0.16);
  --clang-code-comparison-good-border: #3fb950;
}

/* Use the full viewport on ordinary desktop displays, where Furo's fixed
   content width leaves little room after both sidebars. Once the content area
   reaches 90em (84em plus padding), grow symmetric outer margins instead. */
@media (min-width: 67em) {
  .page .sidebar-drawer {
    width: max(15em, calc(50% - 45em));
  }

  .main > .content {
    width: min(84em, calc(100vw - 36em));
  }
}

/* Furo moves the page-local TOC into a drawer below 82em, freeing its 15em
   column for the main content. */
@media (min-width: 67em) and (max-width: 82em) {
  .main > .content {
    width: calc(100vw - 21em);
  }
}

.content img.light-background {
  background-color: #fff;
}

.content table.colored-code-table td,
.content table.colored-code-table th {
  text-align: left;
}

.content table.colored-code-table td:first-child,
.content table.colored-code-table th:first-child {
  background-color: var(--clang-code-comparison-bad-background);
}

.content table.colored-code-table td:nth-child(2),
.content table.colored-code-table th:nth-child(2) {
  background-color: var(--clang-code-comparison-good-background);
}

.content table.colored-code-table td .highlight,
.content table.colored-code-table td pre {
  background-color: transparent;
  border: none;
}

.content div.bad-code,
.content div.good-code {
  padding: 5px;
  text-align: left;
}

.content div.bad-code {
  background-color: var(--clang-code-comparison-bad-background);
  border-left: 4px solid var(--clang-code-comparison-bad-border);
}

.content div.good-code {
  background-color: var(--clang-code-comparison-good-background);
  border-left: 4px solid var(--clang-code-comparison-good-border);
}

.content div.bad-code .highlight,
.content div.bad-code pre,
.content div.good-code .highlight,
.content div.good-code pre {
  background-color: transparent;
  border: none;
}