/*
 * Long-form text whose HTML comes out of a database and so cannot carry
 * classes: wiki pages, business profiles, analyst commentary, the weekly
 * market summary. From `article_classes`.
 *
 *   .prose              full pages
 *   .prose--summary     the boxed commentary excerpt on a keystats report
 *   .prose--news        the weekly market summary, which links out inline
 *
 * KaTeX: the article pages hide `.katex-html` and show the MathML beside it,
 * which browsers render natively. That is also why these pages must NOT load
 * katex.css, tempting as the gem's vendored copy is: its
 * `.katex .katex-mathml` rule clips the MathML to 1×1px on the assumption
 * that `.katex-html` is what you see. Load both and the formula disappears.
 */
@layer components {
  .prose {
    max-inline-size: var(--measure);
    color: var(--color-ink);
    font-family: var(--font-prose);
    font-size: var(--text-prose);
    line-height: var(--leading-prose);
    text-wrap: pretty;

    & > :first-child {
      margin-block-start: 0;
    }

    & > :last-child {
      margin-block-end: 0;
    }

    & h2 {
      margin-block: 1.75em 0.6em;
      font-size: var(--text-h2);
      line-height: var(--leading-h2);
      font-weight: var(--weight-semibold);
      letter-spacing: -0.01em;
      text-wrap: balance;
    }

    & h3 {
      margin-block: 1.5em 0.4em;
      font-size: var(--text-h3);
      line-height: var(--leading-h3);
      font-weight: var(--weight-semibold);
      text-wrap: balance;
    }

    & p {
      margin-block-end: 1em;
    }

    & :is(ul, ol) {
      margin-block-end: 1.25em;
      padding-inline-start: 1.375em;
    }

    & ul { list-style: disc; }
    & ol { list-style: decimal; }

    & li {
      margin-block-end: 0.35em;
      padding-inline-start: 0.25em;

      &::marker {
        color: var(--color-ink-subtle);
      }
    }

    & a {
      color: var(--color-link);
      text-decoration-line: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 0.2em;

      &:hover {
        color: var(--color-link-hover);
      }
    }

    & blockquote {
      margin-block-end: 1em;
      padding-inline-start: var(--space-md);
      border-inline-start: 3px solid var(--color-accent-line);
      color: var(--color-ink-soft);
      font-style: italic;
    }

    & :is(strong, b) {
      font-weight: var(--weight-semibold);
    }

    & span.katex-html {
      display: none;
    }

    & span.katex {
      display: block;
      margin-block: 1.25rem;
    }
  }

  .prose--summary {
    font-size: var(--text-prose-sm);
    line-height: var(--leading-prose-sm);
  }

  .prose--news {
    & h2 {
      margin-block: 1.25em 0.4em;
      font-size: var(--text-h3);
      line-height: var(--leading-h3);
    }

    & p {
      margin-block-end: 1.25em;
    }
  }
}