/* Styles for the docs browser's scraped-HTML article body. The scraped body is
 * generated HTML (h3/p/ul/table/...), so it can't be styled with inline
 * Tailwind utilities the way hand-written ERB is.
 *
 * Colors are Tailwind's own --color-* custom properties, which flip with the
 * theme (see app/assets/tailwind/application.css); this file is plain CSS
 * outside that build, so it has no `dark:` variant of its own.
 *
 * Code blocks inside .docs-body are styled by highlight.css. This file used to
 * carry a second copy of the rouge theme rescoped to `.docs-body .highlight`;
 * it was redundant (nothing here declares a color on `.docs-body pre`, and
 * `highlight` never lands on a <code>) and would have needed maintaining in
 * two places once the theme became themeable. */

/* The sidebar tree's active topic. One class so the server's first paint and
 * tree_filter_controller's live re-sync toggle the same marker. */
.docs-tree-current {
  background-color: var(--color-blue-50, #eff6ff);
  font-weight: 600;
  color: var(--color-blue-700, #1d4ed8);
}

.docs-body {
  color: var(--color-gray-700, #374151);
  line-height: 1.65;
}
.docs-body h2,
.docs-body h3,
.docs-body h4,
.docs-body h5,
.docs-body h6 {
  font-weight: 600;
  color: var(--color-gray-900, #111827);
  margin: 1.5rem 0 0.5rem;
  line-height: 1.3;
}
.docs-body h2 { font-size: 1.25rem; }
.docs-body h3 { font-size: 1.125rem; }
.docs-body h4,
.docs-body h5,
.docs-body h6 { font-size: 1rem; }
.docs-body p { margin: 0.75rem 0; }
.docs-body ul,
.docs-body ol { margin: 0.75rem 0; padding-left: 1.5rem; }
.docs-body ul { list-style: disc; }
.docs-body ol { list-style: decimal; }
.docs-body li { margin: 0.25rem 0; }
.docs-body a { color: var(--color-blue-600, #2563eb); text-decoration: underline; }
.docs-body a:hover { text-decoration: none; }
.docs-body img { max-width: 100%; height: auto; margin: 1rem 0; border-radius: 0.375rem; }
.docs-body table {
  border-collapse: collapse;
  margin: 1rem 0;
  width: 100%;
  font-size: 0.875rem;
}
.docs-body th,
.docs-body td {
  border: 1px solid var(--color-gray-200, #e5e7eb);
  padding: 0.5rem 0.75rem;
  text-align: left;
  vertical-align: top;
}
.docs-body th { background-color: var(--color-gray-50, #f9fafb); font-weight: 600; }
.docs-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.875em;
  background-color: var(--color-gray-100, #f3f4f6);
  padding: 0.1rem 0.3rem;
  border-radius: 0.25rem;
}
.docs-body pre {
  margin: 1rem 0;
  padding: 0.875rem 1rem;
  border-radius: 0.5rem;
  overflow-x: auto;
  font-size: 0.875rem;
  line-height: 1.5;
}
.docs-body pre code {
  background-color: transparent;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
}

/* The portal ships per-OS tables (and other "expanding blocks") inside
 * accordions whose panel bodies carry `collapse`. Tailwind defines .collapse as
 * visibility:collapse, so those panels rendered blank — two classes here
 * outrank it whatever the stylesheet order. There is no accordion JS on this
 * side, so show every panel and give its heading the weight of one. */
.docs-body .collapse { visibility: visible; }
.docs-body .sidebar-title {
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--color-gray-900, #111827);
  margin: 1.5rem 0 0.5rem;
}