/* ==========================================================================
   .tp-prose — P1.F2.T3 (added Wave 1b, orchestrator-assigned)
   ©2026 Vexstorm Studios – All Rights Reserved

   A long-form text block: an observation's description, a contribution's
   narrative, a report's commentary. Everything a person wrote in sentences
   rather than a value the system computed.

   Two jobs, and both are readability rather than decoration:

     * A BOUNDED MEASURE. Body text running the full width of a 2560px display
       is measurably harder to read — the eye loses the line on the return
       sweep. --tp-space-prose-max caps it at roughly 75 characters.
     * COMFORTABLE LEADING. --tp-leading-loose rather than the interface default,
       because this is read in paragraphs rather than scanned in rows.

   Variants   (none)
   Elements   (none — the point of this component is that the content inside it
              carries no classes)
   States     (non-interactive; links inside it inherit the base link styling
              and the global focus ring)

   USED AS A <p> AND AS A CONTAINER. observations/detail.html applies it
   directly to a paragraph; a sanitized rich-text field applies it to a wrapper.
   Both work: the block-level rules below are inert on a paragraph.

   ELEMENT SELECTORS, DELIBERATELY AND ONLY HERE. This component exists to style
   markup that has no classes, so scoped element selectors are not a shortcut —
   they are the mechanism. The set below is exactly
   common.sanitizers.ALLOWED_TAGS, which is a closed allowlist: a, abbr, b,
   blockquote, br, code, em, i, li, ol, p, pre, span, strong, ul. Nothing else
   can survive sanitization, so nothing else needs a rule, and every selector is
   scoped inside .tp-prose and cannot match anything outside it.
   ========================================================================== */

.tp-prose {
  max-width: var(--tp-space-prose-max);
  min-width: 0;
  color: var(--tp-color-text-primary);
  font-size: var(--tp-text-base);
  line-height: var(--tp-leading-loose);
  /* A pasted identifier, URL, or unbroken token must not widen the page
     (UX-004). */
  overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   Block content — the sanitizer's allowlist, and nothing beyond it
   -------------------------------------------------------------------------- */

.tp-prose p {
  margin-block: 0 var(--tp-space-4);
}

.tp-prose p:last-child {
  margin-bottom: 0;
}

.tp-prose ul,
.tp-prose ol {
  margin-block: 0 var(--tp-space-4);
  padding-inline-start: var(--tp-space-6);
  /* reset.css strips markers from any list carrying a class; these carry none,
     but the rule restores them explicitly so a future refactor cannot remove
     the only thing marking these as list items. */
  list-style: revert;
}

.tp-prose li {
  margin-bottom: var(--tp-space-1);
}

.tp-prose blockquote {
  margin: 0 0 var(--tp-space-4);
  padding: var(--tp-space-2) var(--tp-space-4);
  border-inline-start: var(--tp-border-width-thick) solid
    var(--tp-color-border-default);
  color: var(--tp-color-text-secondary);
}

.tp-prose pre {
  margin-block: 0 var(--tp-space-4);
  padding: var(--tp-space-3);
  border-radius: var(--tp-radius-md);
  background-color: var(--tp-color-surface-sunken);
  /* A long line scrolls inside the block rather than widening the page. */
  overflow-x: auto;
}

/* --------------------------------------------------------------------------
   Inline content
   -------------------------------------------------------------------------- */

.tp-prose strong,
.tp-prose b {
  font-weight: var(--tp-weight-bold);
}

.tp-prose em,
.tp-prose i {
  font-style: italic;
}

.tp-prose code {
  font-family: var(--tp-font-mono);
  font-size: var(--tp-text-sm);
}

/* An abbreviation's expansion is in its title attribute, which is hover-only
   and therefore unreachable on a touch device — the dotted underline at least
   signals that there is something to reach for, and the base layer supplies
   the cursor. */
.tp-prose abbr {
  text-decoration: underline dotted;
}

/* Links keep the base layer's underline and colour. A user-supplied link inside
   prose is somebody else's URL, and it must look like a link rather than like
   emphasised text. */
.tp-prose a {
  color: var(--tp-color-text-link);
  text-decoration: underline;
}