/* ============================================
   QuickEasy BOS 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;
}
/* Thai stacks vowel and tone marks above and below the line. */
:lang(th) .doc-content { line-height: 1.8; }

/* --- 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);
}
/* Bigger and bolder than bold body text (16px/700) and with a full line
   above, so it reads as a heading rather than a bold label - at 17px/600
   it was indistinguishable from one (owner, 2026-09-29). Still smaller
   than h3. */
.doc-content h4 {
  font-size: 1.125rem;
  font-weight: 700;
  margin: var(--space-lg) 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 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 {
  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;
}
.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); }
/* Amount columns (debits, credits, totals): right-aligned with
   equal-width digits, so the decimal points line up down the column.
   Put class="num" on each cell of the column, header included. */
.doc-content th.num,
.doc-content td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* Editable fields: the field-name cell of a reference-table row whose
   column is editable in the app, which shows its caption in blue
   (DtmdlMain.sCaptionBlue). Put class="field-editable" on that first
   cell only; links inside it take the same blue. A pencil follows the
   name so colour isn't the only cue (WCAG 1.4.1), as on bos-ent-docs:
   the no-break space keeps it from wrapping onto a line of its own, and
   the alt text after "/" gives screen readers "editable" instead of the
   glyph's name (the first declaration is the fallback for browsers
   without alt text in content). Each such table's section has a Note:
   "Fields marked in blue (✎) can be edited." */
.doc-content td.field-editable,
.doc-content td.field-editable a { color: var(--editable); }
.doc-content td.field-editable::after {
  content: "\00A0\270E";
  content: "\00A0\270E" / "editable";
}
.doc-content tbody tr:last-child td { border-bottom: 0; }
/* Cell paragraphs and lists (tools/table-spacing.js wraps a multi-line
   cell's sentences in <p>; tools/table-lists.js turned the source's
   "<br>– item" lines into real lists): a half-line gap between sentences
   and between a sentence and a list, so a long cell reads as separate
   statements rather than one block - smaller than body paragraphs so it
   still reads as one cell. */
.doc-content td > p,
.doc-content th > p { margin: 0 0 var(--space-sm); }
.doc-content td > ul,
.doc-content td > ol,
.doc-content th > ul,
.doc-content th > ol {
  margin: var(--space-sm) 0;
}
.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; }

/* --- 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=green, Warning=red, Important=black,
   Navigation=teal) - 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);
}
/* Table-cell screenshots open in the lightbox too (main.js adds .is-zoomable). */
.doc-content td img.is-zoomable { cursor: zoom-in; }
.doc-content figure img {
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: zoom-in;
  /* Centre images narrower than the content column, in line with the
     centred caption (differs from bos-ent-docs, whose figures sit left).
     Full-width screenshots are unaffected. */
  margin-inline: auto;
}
.doc-content figcaption {
  margin-top: var(--space-xs);
  font-size: 0.875rem;
  color: var(--muted-foreground);
  text-align: center;
}

/* --- Diagrams (2026-10-08) ---
   Drawn in the site's own grey tokens, so they follow light/dark mode:
   simple diagrams are HTML boxes that wrap on a phone; a branching flow
   chart is inline SVG in a sideways-scrolling wrapper, like a table.
   Written by tools/diagrams.js - edit a diagram there, never in a page. */
.doc-content figure.diagram {
  margin: var(--space-md) 0 var(--space-lg);
}
.doc-content .diagram__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-sm);
  list-style: none;
  margin: 0;
  padding: 0;
}
.doc-content .diagram__row > li { margin: 0; }
.doc-content .diagram__box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 7.5rem;
  max-width: 12rem;
  min-height: 3rem;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--muted);
  color: var(--foreground);
  font-size: 0.9375rem;
  line-height: 1.3;
  text-align: center;
}
/* The result the other boxes feed into (or come from). */
.doc-content .diagram__box--main {
  border: 2px solid var(--foreground);
  background: var(--background);
  font-weight: 700;
}
.doc-content .diagram__box small {
  margin-top: 2px;
  color: var(--muted-foreground);
  font-size: 0.8125rem;
  font-weight: 400;
}
/* "+", "=", "→" between boxes, and the "↓" between rows. */
.doc-content .diagram__op {
  color: var(--muted-foreground);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1;
}
.doc-content .diagram__arrow {
  margin: var(--space-xs) 0;
  color: var(--muted-foreground);
  font-size: 1.5rem;
  line-height: 1;
  text-align: center;
}
/* Steps stack top to bottom on a phone, so no arrow is left at a line end. */
@media (max-width: 599px) {
  .doc-content .diagram__row--steps { flex-direction: column; }
  .doc-content .diagram__row--steps .diagram__op { transform: rotate(90deg); }
}
.doc-content .diagram--flow { overflow-x: auto; }
.doc-content .diagram--flow svg {
  display: block;
  margin-inline: auto;
  font-family: var(--font-body);
}
.doc-content .diagram--flow rect { fill: var(--muted); stroke: var(--border-strong); stroke-width: 1.5; }
.doc-content .diagram--flow rect.diagram__note { fill: none; stroke-dasharray: 4 3; }
.doc-content .diagram--flow .diagram__line { fill: none; stroke: var(--muted-foreground); stroke-width: 1.5; }
.doc-content .diagram--flow .diagram__head { fill: var(--muted-foreground); }
.doc-content .diagram--flow text { fill: var(--foreground); font-size: 14px; text-anchor: middle; }
.doc-content .diagram--flow .diagram__resolve { font-weight: 700; }
.doc-content .diagram--flow .diagram__other { fill: var(--muted-foreground); font-size: 13px; }
.doc-content .diagram--flow .diagram__explain { fill: var(--muted-foreground); font-style: italic; }

/* --- 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;
}

/* --- Disclosures (expand/collapse) ---
   Native <details>/<summary>, for content the source site presented as
   accordions/toggles (e.g. General Functions and Features > Overview).
   No JS; closed by default; the content stays in the page, so Pagefind
   still indexes it and Ctrl+F still finds it (browsers auto-open a
   <details> on find-in-page). Same monochrome treatment as tables. */
.doc-content details {
  margin: 0 0 var(--space-sm);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.doc-content summary {
  padding: var(--space-sm) var(--space-md);
  font-weight: 600;
  cursor: pointer;
}
.doc-content summary:hover { background: var(--background-alt); }
.doc-content details[open] > summary { border-bottom: 1px solid var(--border); }
.doc-content details > :not(summary) { margin-left: var(--space-md); margin-right: var(--space-md); }
.doc-content details > :nth-child(2) { margin-top: var(--space-md); }

/* 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); }

/* Page intro (the 💡 line, `<p><strong><em>💡…</em></strong></p>`; owner,
   2026-11-10): a yellow bar and pale yellow fill, slightly larger plain
   text - no bold or italics, which are hard to read in a whole paragraph
   (especially Thai).
   Article pages are matched by their markup; landing pages write it plain
   with class="page-intro" (list-descriptions.js). Only the page intro has
   it (lint saved-rules flags a 💡 under an h2). */
.doc-content p.page-intro,
.doc-content p:has(> strong:only-child > em:only-child) {
  border-left: 4px solid var(--intro);
  background: var(--intro-bg);
  border-radius: 0 var(--radius-sm, 4px) var(--radius-sm, 4px) 0;
  padding: 0.625rem var(--space-md);
  font-size: 1.0625rem;
  color: var(--foreground);
}
.doc-content p:has(> strong:only-child > em:only-child) > strong,
.doc-content p:has(> strong:only-child > em:only-child) em {
  font-weight: inherit;
  font-style: normal;
}