/*
 * Signal and Echo design system: the prose part (site profile, issue 164 slice 17;
 * .claude/reference/site-profile.md s4, s6, decisions 2 and 5).
 *
 * `.sds-prose` is long-form text: an article, a devlog post, a legal page, a bio. It holds
 * paragraphs, h2/h3/h4, lists, code, pre, blockquote, table, figure and hr, and keeps them to a
 * readable measure, --sds-measure (68ch; `ch` is not a token unit, so the measure is a property this
 * part defines on :root, in sds.reset, where a site can set its own).
 * - Default (`data-variant="center"` or none): the column is centered, for a single-column article
 *   (NB devlog and legal). `data-variant="start"`: the column sits at the start edge, beside an aside
 *   or a table of contents (SE press, /chris). Taste call 2.
 * - Rhythm: one body line (type.body size x line height) between blocks; 2 lines above a heading,
 *   space.3 below it. Headings: h2 heading role, h3 lead size, h4 body size, all in font.display,
 *   heading weight, color.text-strong.
 * - Links: a bare a or an .sds-link in prose is always underlined (decision 5, WCAG 1.4.1). The
 *   line style is the theme's link.decoration (SE solid, NB dashed); with `none` it falls back to solid.
 *
 * Every value is a token; the only literals are 0, percentages, em and unitless numbers.
 */

/* sds-claims: prose */

@layer sds.reset, sds.components;

@layer sds.reset {
  :root {
    --sds-measure: 68ch;
  }
}

@layer sds.components {
  .sds-prose {
    --sds-prose-rhythm: calc(var(--sds-type-body-size) * var(--sds-type-scale) * var(--sds-type-body-line-height));
    max-inline-size: var(--sds-measure);
    color: var(--sds-color-text);
    font-family: var(--sds-font-body);
    font-size: calc(var(--sds-type-body-size) * var(--sds-type-scale));
    font-weight: var(--sds-type-body-weight);
    letter-spacing: var(--sds-type-body-tracking);
    line-height: var(--sds-type-body-line-height);
    overflow-wrap: break-word;
  }

  .sds-prose:where(:not([data-variant]), [data-variant="center"]) {
    margin-inline: auto;
  }

  .sds-prose:where([data-variant="start"]) {
    margin-inline: 0 auto;
  }

  /* --- rhythm: blocks sit one body line apart; text elements lose their browser margins. */

  .sds-prose :where(p, h2, h3, h4, ul, ol, li, dl, dd, pre, blockquote, figure, table, hr) {
    margin-block: 0;
  }

  .sds-prose > :where(* + *) {
    margin-block-start: var(--sds-prose-rhythm);
  }

  /* --- headings */

  .sds-prose :where(h2, h3, h4) {
    color: var(--sds-color-text-strong);
    font-family: var(--sds-font-display);
    font-weight: var(--sds-type-heading-weight);
    line-height: var(--sds-type-heading-line-height);
    letter-spacing: var(--sds-type-heading-tracking);
    text-wrap: balance;
  }

  .sds-prose :where(h2) {
    font-size: calc(var(--sds-type-heading-size) * var(--sds-type-scale));
  }

  .sds-prose :where(h3) {
    font-size: calc(var(--sds-type-lead-size) * var(--sds-type-scale));
  }

  .sds-prose :where(h4) {
    font-size: calc(var(--sds-type-body-size) * var(--sds-type-scale));
  }

  .sds-prose > :where(* + h2, * + h3, * + h4) {
    margin-block-start: calc(var(--sds-prose-rhythm) * 2);
  }

  .sds-prose > :where(h2, h3, h4) + :where(*) {
    margin-block-start: var(--sds-space-3);
  }

  .sds-prose :where(strong, b) {
    color: var(--sds-color-text-strong);
  }

  /* --- links: always underlined in prose (bare a and .sds-link, quiet included). */

  .sds-prose a:where(:not([class]), .sds-link) {
    text-decoration-line: underline;
  }

  /* --- lists */

  .sds-prose :where(ul, ol) {
    padding-inline-start: var(--sds-space-6);
  }

  .sds-prose :where(li + li, li > ul, li > ol) {
    margin-block-start: var(--sds-space-2);
  }

  .sds-prose :where(li)::marker {
    color: var(--sds-color-text-muted);
  }

  /* --- code */

  .sds-prose :where(code, kbd, samp) {
    font-family: var(--sds-font-mono);
    font-size: 0.9em;
  }

  .sds-prose :where(:not(pre) > code) {
    padding: var(--sds-space-1) var(--sds-space-2);
    border-radius: var(--sds-radius-xs);
    background: var(--sds-color-surface-raised);
    color: var(--sds-color-text-strong);
  }

  .sds-prose :where(pre) {
    overflow-x: auto;
    padding: var(--sds-space-5);
    border: var(--sds-border-thin) solid var(--sds-color-line);
    border-radius: var(--sds-radius-sm);
    background: var(--sds-color-surface);
    font-family: var(--sds-font-mono);
    font-size: calc(var(--sds-type-small-size) * var(--sds-type-scale));
    line-height: var(--sds-type-small-line-height);
    overflow-wrap: normal;
    tab-size: 2;
  }

  .sds-prose :where(pre code) {
    font-size: inherit;
  }

  /* --- blockquote */

  .sds-prose :where(blockquote) {
    margin-inline: 0;
    padding-inline-start: var(--sds-space-5);
    border-inline-start: var(--sds-border-thick) solid var(--sds-color-line-strong);
    color: var(--sds-color-text-soft);
  }

  .sds-prose :where(blockquote > * + *) {
    margin-block-start: var(--sds-space-4);
  }

  /* --- table: full column width, small text, rows ruled. */

  .sds-prose :where(table) {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: calc(var(--sds-type-small-size) * var(--sds-type-scale));
    line-height: var(--sds-type-small-line-height);
    font-variant-numeric: tabular-nums;
  }

  .sds-prose :where(th, td) {
    padding: var(--sds-space-3) var(--sds-space-4);
    border-block-end: var(--sds-border-thin) solid var(--sds-color-line);
    text-align: start;
    vertical-align: top;
  }

  .sds-prose :where(th) {
    border-block-end-color: var(--sds-color-line-strong);
    color: var(--sds-color-text-strong);
    font-family: var(--sds-font-ui);
    font-weight: var(--sds-type-label-weight);
  }

  .sds-prose :where(caption, figcaption) {
    color: var(--sds-color-text-muted);
    font-size: calc(var(--sds-type-caption-size) * var(--sds-type-scale));
    line-height: var(--sds-type-caption-line-height);
    letter-spacing: var(--sds-type-caption-tracking);
    text-align: start;
  }

  .sds-prose :where(caption) {
    padding-block-end: var(--sds-space-3);
  }

  /* --- figure */

  .sds-prose :where(figure) {
    margin-inline: 0;
  }

  .sds-prose :where(figure img, figure video) {
    display: block;
    border-radius: var(--sds-radius-sm);
  }

  .sds-prose :where(figcaption) {
    margin-block-start: var(--sds-space-3);
  }

  /* --- rule */

  .sds-prose :where(hr) {
    border: 0;
    border-block-start: var(--sds-border-thin) solid var(--sds-color-line);
  }

  .sds-prose > :where(hr) {
    margin-block: calc(var(--sds-prose-rhythm) * 2);
  }
}