/*
 * Long-form text whose HTML comes out of a database and so cannot carry
 * classes: wiki pages, business profiles, Financial Analyses, 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
 *
 * Code and tables are the API docs' (tasks/growth/milestones/14, D4): a URL,
 * a formula or a snippet set in the data face on the sunken ground, a block
 * of it scrolling sideways inside the page rather than widening it on a
 * phone; a table ruled like the data tables, its cells in the UI face.
 *
 * 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);
    }

    & code {
      padding: 0.1em 0.3em;
      border-radius: var(--radius-xs);
      background-color: var(--color-surface-sunken);
      font-family: var(--font-data);
      font-size: 0.875em;
      overflow-wrap: anywhere;
    }

    & pre {
      margin-block-end: 1.25em;
      padding: var(--space-sm);
      overflow-x: auto;
      border-radius: var(--radius-sm);
      background-color: var(--color-surface-sunken);
      font-size: var(--text-ui-sm);
      line-height: var(--leading-ui-sm);

      & code {
        padding: 0;
        background: none;
        font-size: inherit;
        white-space: pre;
        overflow-wrap: normal;
      }
    }

    & table {
      inline-size: 100%;
      margin-block-end: 1.25em;
      border-collapse: collapse;
      font-family: var(--font-ui);
      font-size: var(--text-ui-sm);
      line-height: var(--leading-ui-sm);
    }

    & :is(th, td) {
      padding: var(--space-2xs) var(--space-xs);
      border-block-end: var(--rule-width) solid var(--color-rule);
      text-align: start;
      vertical-align: top;
    }

    & th {
      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;
    }
  }
}