/* ============================================
   BOS Professional Docs — content.css ("EDITOR" STYLESHEET)
   Every content shape a documentation page authors from. Scoped entirely
   under .doc-content so it never leaks into site chrome (see site.css)
   and chrome styles never leak into authored content.

   When writing or migrating a page, reuse these classes — do not invent
   new ad hoc content styling per page. See CLAUDE.md for the full class
   vocabulary reference.
   ============================================ */

.doc-content {
  color: var(--foreground);
  line-height: 1.65;
}

/* --- Headings --- */
.doc-content h1 {
  font-size: 1.875rem;
  font-weight: 700;
  margin: 0 0 var(--space-lg);
  /* The one heading level that uses the brand accent - see --accent in
     site.css and project-docs/Stylesheet.md. H2-H4 stay strictly monochrome. */
  color: var(--accent);
}
.doc-content h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin: var(--space-xl) 0 var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
}
.doc-content h2:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.doc-content h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: var(--space-lg) 0 var(--space-sm);
}
.doc-content h4 {
  font-size: 1.0625rem;
  font-weight: 600;
  margin: var(--space-md) 0 var(--space-sm);
}
/* Land below the sticky header, not partially behind it, when jumping
   here via a TOC link or a shared #heading-id URL. */
.doc-content h2[id],
.doc-content h3[id] {
  scroll-margin-top: calc(var(--header-height) + var(--space-md));
}
/* Hover-revealed "#" link next to h2/h3 for sharing a direct section
   link - same id the "On this page" list (site.css .page-toc) points at. */
.doc-content .heading-anchor {
  margin-left: var(--space-sm);
  font-weight: 400;
  font-size: 0.85em;
  color: var(--muted-foreground);
  text-decoration: none;
  opacity: 0;
}
.doc-content h2:hover .heading-anchor,
.doc-content h3:hover .heading-anchor,
.doc-content .heading-anchor:focus {
  opacity: 1;
}

/* --- Body text --- */
.doc-content p { margin: 0 0 var(--space-md); }
.doc-content strong { font-weight: 700; }
.doc-content a { color: var(--foreground); text-decoration: underline; text-underline-offset: 2px; }
.doc-content a:hover { color: var(--muted-foreground); }

/* --- Lists --- */
.doc-content ul,
.doc-content ol {
  margin: 0 0 var(--space-md);
  padding-left: 1.5rem;
}
.doc-content li { margin-bottom: var(--space-xs); }
/* A landing page's Articles/Tutorials list, one "Title: description" row
   per link (tools/list-descriptions.js): a gap between rows so each reads
   as its own entry. */
.doc-content ul.article-list > li { margin-bottom: var(--space-md); }
.doc-content li > ul,
.doc-content li > ol { margin-top: var(--space-xs); margin-bottom: 0; }

/* Nested ordered lists: 1, 2, 3 -> a, b, c -> i, ii, iii, repeating from
   there if a list ever nests deeper than 3 levels (the deepest anywhere
   on the site today is 4). Browsers default every <ol> to decimal
   regardless of nesting, so without this a level-2/3 list just repeats
   "1. 2. 3." instead of visually marking its depth. */
.doc-content ol ol { list-style-type: lower-alpha; }
.doc-content ol ol ol { list-style-type: lower-roman; }
.doc-content ol ol ol ol { list-style-type: decimal; }
.doc-content ol ol ol ol ol { list-style-type: lower-alpha; }
.doc-content ol ol ol ol ol ol { list-style-type: lower-roman; }

/* --- Tables --- */
.doc-content .table-wrapper {
  overflow-x: auto;
  margin: 0 0 var(--space-md);
  border: 1px solid var(--border);
  border-radius: 4px;
}
/* A paragraph directly after a table only has that table's own bottom
   margin (--space-md) separating it - the same gap as between any two
   ordinary paragraphs. When that paragraph is itself introducing a
   *different* table right below it (e.g. "The following X are
   supported:" sandwiched between two tables), that's not enough visual
   separation from the table above to make it obvious which table it
   belongs to. Give it extra breathing room above instead. */
.doc-content .table-wrapper + p,
.doc-content .table-wrapper + h4 {
  margin-top: var(--space-lg);
}
.doc-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.doc-content th,
.doc-content td {
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  border-bottom: 1px solid var(--border);
  /* Vertical column dividers, not just horizontal row rules - lets the
     eye trace a single column straight down a reference/comparison
     table (e.g. "If you want to... / Look for..."), which a
     horizontal-only grid doesn't give you. Dropped on the outermost
     edge since .table-wrapper's own border already draws that line. */
  border-right: 1px solid var(--border);
  vertical-align: top;
}
.doc-content th:last-child,
.doc-content td:last-child {
  border-right: 0;
}
/* A list or paragraph inside a cell starts and ends flush with the cell
   padding, so its first line lines up with the text in the next column. */
.doc-content td > :first-child,
.doc-content th > :first-child { margin-top: 0; }
.doc-content td > :last-child,
.doc-content th > :last-child { margin-bottom: 0; }
.doc-content thead th {
  background: var(--muted);
  font-weight: 600;
  /* Thicker than the body's row/column rules - the header needs to read
     as structurally distinct from data rows, not just visually shaded. */
  border-bottom: 2px solid var(--border-strong);
}
.doc-content tbody tr:nth-child(even) { background: var(--background-alt); }
.doc-content tbody tr:last-child td { border-bottom: 0; }
/* Amount column (owner, 2026-10-06): class "num" on the column's th and
   every td. Right-aligned with equal-width digits, so the decimal points
   of amounts with the same number of decimals line up; nowrap keeps
   "2 000.00" (space as the thousands separator) on one line. */
.doc-content th.num,
.doc-content td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Editable field: the field-name cell of a "Fields Explained" row whose
   column can be edited in BOS Professional (per the product source's
   grid definitions - see tools/mark-editable-fields.js). Accent green
   (the fourth sanctioned use of --accent; 4.8:1 on the striped rows in
   light mode, 7.6:1 in dark), plus a pencil so colour isn't the only cue
   (WCAG 1.4.1); the alt text after "/" gives screen readers a word
   instead of a glyph name, and the no-break space keeps the pencil from
   wrapping onto its own line. Pair with the Info callout "Fields marked
   in green (✎) can be edited." above the table. Same as bos-ent-docs. */
.doc-content td.field-editable { color: var(--accent); }
.doc-content td.field-editable::after {
  content: "\00A0\270E";
  content: "\00A0\270E" / "editable";
}

/* --- Collapsible section: <details class="collapsible"><summary><h2 ...>
   Heading</h2></summary> ...content... </details>. Closed by default; the
   heading stays a real h2 (anchor, "On this page" entry) and gets a
   chevron that turns when open. Used for the blogs' "Learn More" link
   lists (2026-09-24). */
.doc-content details.collapsible > summary {
  list-style: none;
  cursor: pointer;
}
.doc-content details.collapsible > summary::-webkit-details-marker { display: none; }
.doc-content details.collapsible > summary > h2,
.doc-content details.collapsible > summary > h3 {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.doc-content details.collapsible > summary > :is(h2, h3)::before {
  content: "";
  flex: none;
  width: 0.45em;
  height: 0.45em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}
.doc-content details.collapsible[open] > summary > :is(h2, h3)::before { transform: rotate(45deg); }
.doc-content details.collapsible > summary:focus-visible { outline: 2px solid var(--foreground); outline-offset: 2px; }

/* --- Field list fold: <details class="fields-fold"><summary>Fields (59)</summary>
   <p>A, B, C</p></details> inside a list item. Closed by default, a small
   chevron line under the entry; the names stay in the page for search
   (Output Data Pipelines, owner 2026-10-22). */
.doc-content details.fields-fold { margin: 0.25em 0 0.5em; }
.doc-content details.fields-fold > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.9em;
  color: var(--muted-foreground, inherit);
}
.doc-content details.fields-fold > summary::-webkit-details-marker { display: none; }
.doc-content details.fields-fold > summary::before {
  content: "";
  width: 0.4em;
  height: 0.4em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}
.doc-content details.fields-fold[open] > summary::before { transform: rotate(45deg); }
.doc-content details.fields-fold > summary:focus-visible { outline: 2px solid var(--foreground); outline-offset: 2px; }
.doc-content details.fields-fold > p { margin: 0.35em 0 0; font-size: 0.9em; overflow-wrap: anywhere; }

/* --- Callouts: a colored left border plus a caption in that same
   color, and (per an explicit user request to deviate from the earlier
   no-background-fill spec) a background tint of that same color, several
   shades lighter via a low-alpha rgba() *-bg token per color (site.css)
   so the callout text stays easily readable. Five types, each a distinct
   color (Note=gray, Info=light blue, Warning=red, Important=black,
   Navigation=green, the brand accent) - these colors ARE the differentiator now that
   there's no icon, so don't add a 6th type without picking a genuinely
   distinct color for it too. See project-docs/Stylesheet.md for the
   full catalog, the color rationale, and the Note:/Warning:/Important:/
   Navigation: plain-text authoring convention that produces each one. */
.doc-content .callout {
  padding: var(--space-xs) var(--space-md);
  margin: 0 0 var(--space-md);
  border-left: 4px solid var(--border-strong);
}
.doc-content .callout__body > :last-child { margin-bottom: 0; }
.doc-content .callout__label {
  display: block;
  font-weight: 700;
  margin-bottom: var(--space-xs);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}

.doc-content .callout--note {
  border-left-color: var(--muted-foreground);
  background: var(--note-bg);
}
.doc-content .callout--note .callout__label { color: var(--muted-foreground); }

.doc-content .callout--info {
  border-left-color: var(--info);
  background: var(--info-bg);
}
.doc-content .callout--info .callout__label { color: var(--info); }

.doc-content .callout--warning {
  border-left-color: var(--destructive);
  background: var(--destructive-bg);
}
.doc-content .callout--warning .callout__label { color: var(--destructive); }

.doc-content .callout--important {
  border-left-color: var(--foreground);
  background: var(--important-bg);
}
.doc-content .callout--important .callout__label { color: var(--foreground); }

.doc-content .callout--navigation {
  border-left-color: var(--accent);
  background: var(--accent-bg);
}
.doc-content .callout--navigation .callout__label { color: var(--accent); }

/* --- Code --- */
.doc-content code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--muted);
  padding: 0.125rem 0.375rem;
  border-radius: 3px;
}
.doc-content pre {
  margin: 0 0 var(--space-md);
  padding: var(--space-md);
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow-x: auto;
}
.doc-content pre code {
  background: none;
  padding: 0;
  font-size: 0.875rem;
  line-height: 1.6;
}

/* --- Images / figures --- */
.doc-content figure {
  margin: 0 0 var(--space-md);
}
.doc-content figure img {
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: zoom-in;
}
.doc-content figcaption {
  margin-top: var(--space-xs);
  font-size: 0.875rem;
  color: var(--muted-foreground);
  text-align: center;
}

/* --- Blockquotes / rules --- */
.doc-content blockquote {
  margin: 0 0 var(--space-md);
  padding-left: var(--space-md);
  border-left: 3px solid var(--border-strong);
  color: var(--muted-foreground);
}
.doc-content hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--space-lg) 0;
}

/* Table sort toggle (main.js "Table sort"): a small pill after the first
   column heading of tables with 15+ rows. */
.doc-content .table-sort {
  margin-left: var(--space-xs, 0.25rem);
  padding: 0 0.5em;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.6;
  white-space: nowrap;
  vertical-align: middle;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  cursor: pointer;
}
.doc-content .table-sort:hover { background: var(--background); }
.doc-content .table-sort:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.doc-content .table-sort[aria-pressed="true"] { color: var(--foreground); }