/* ═══════════════════════════════════════════════════════════════
   RICHTEXT-N — Markdown → styled HTML renderer
   ═══════════════════════════════════════════════════════════════ */

@scope (richtext-ui) {
  :where(:scope) {
    /* ── Layout ── */
    /* Optimal reading measure; not on spatial scale (45rem ≈ 720px at 1rem=16px). */
    --richtext-max-width-default:      45rem;
    --richtext-px-default:             var(--a-space-6);
    --richtext-py-default:             var(--a-space-8);

    /* ── Colors ── */
    --richtext-bg-default:             var(--a-canvas-0);
    --richtext-fg-default:             var(--a-fg);
    --richtext-fg-muted-default:       var(--a-fg-muted);
    --richtext-fg-subtle-default:      var(--a-fg-subtle);
    --richtext-code-bg-default:        var(--a-canvas-2);
    --richtext-border-default:         var(--a-border-subtle);
    --richtext-link-default:           var(--a-accent-bg);
    --richtext-link-hover-default:     var(--a-accent);

    /* ── Typography ── */
    --richtext-font-default:           var(--a-font-family);
    --richtext-font-code-default:      var(--a-font-family-code);
    --richtext-body-size-default:      var(--a-body-size);
    --richtext-body-leading-default:   var(--a-body-leading);
    --richtext-code-size-default:      var(--a-ui-sm);

    /* ── Heading typography ── */
    --richtext-h1-size-default:        var(--a-heading-size);
    --richtext-h1-weight-default:      var(--a-weight-bold);
    --richtext-h1-leading-default:     var(--a-heading-leading);
    --richtext-h2-size-default:        var(--a-section-size);
    --richtext-h2-weight-default:      var(--a-section-weight);
    --richtext-h2-leading-default:     var(--a-section-leading);
    --richtext-h3-size-default:        var(--a-subsection-size);
    --richtext-h3-weight-default:      var(--a-subsection-weight);
    --richtext-h4-weight-default:      var(--a-weight-semibold);

    /* ── Heading rhythm ── */
    --richtext-h1-margin-bottom-default: var(--a-space-2);
    --richtext-h2-margin-top-default:    var(--a-space-8);
    --richtext-h2-margin-bottom-default: var(--a-space-3);
    --richtext-h2-pad-bottom-default:    var(--a-space-2);
    --richtext-h3-margin-top-default:    var(--a-space-6);
    --richtext-h3-margin-bottom-default: var(--a-space-2);
    --richtext-h4-margin-top-default:    var(--a-space-4);
    --richtext-h4-margin-bottom-default: var(--a-space-1);

    /* ── Block rhythm ── */
    --richtext-p-margin-bottom-default:  var(--a-space-3);
    --richtext-block-my-default:         var(--a-space-3);

    /* ── Inline code ── */
    --richtext-code-radius-default:      var(--a-radius-sm);

    /* ── Code block ── */
    --richtext-pre-radius-default:       var(--a-radius-md);
    --richtext-pre-inset-default:        var(--a-space-3);
    --richtext-pre-my-default:           var(--a-space-3);

    /* ── Lists ── */
    --richtext-list-my-default:          var(--a-space-2);
    --richtext-list-indent-default:      var(--a-space-6);
    --richtext-li-margin-bottom-default: var(--a-space-1);

    /* ── Tables ── */
    --richtext-table-my-default:         var(--a-space-3);
    --richtext-th-py-default:            var(--a-space-2);
    --richtext-th-px-default:            var(--a-space-3);
    --richtext-th-weight-default:        var(--a-weight-semibold);

    /* ── HR ── */
    --richtext-hr-my-default:            var(--a-space-6);

    /* ── Strong ── */
    --richtext-strong-weight-default:    var(--a-weight-semibold);
  }

  :scope {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--richtext-bg, var(--richtext-bg-default));
    color: var(--richtext-fg, var(--richtext-fg-default));
    font-family: var(--richtext-font, var(--richtext-font-default));
    overflow-y: auto;
  }

  /* ── Body container ── */

  [data-richtext-body] {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--richtext-max-width, var(--richtext-max-width-default));
    padding: var(--richtext-py, var(--richtext-py-default)) var(--richtext-px, var(--richtext-px-default));
  }

  /* ── Headings ── */

  [data-richtext-body] h1 {
    font-size: var(--richtext-h1-size, var(--richtext-h1-size-default));
    font-weight: var(--richtext-h1-weight, var(--richtext-h1-weight-default));
    line-height: var(--richtext-h1-leading, var(--richtext-h1-leading-default));
    margin: 0 0 var(--richtext-h1-margin-bottom, var(--richtext-h1-margin-bottom-default));
  }

  [data-richtext-body] h2 {
    font-size: var(--richtext-h2-size, var(--richtext-h2-size-default));
    font-weight: var(--richtext-h2-weight, var(--richtext-h2-weight-default));
    line-height: var(--richtext-h2-leading, var(--richtext-h2-leading-default));
    margin: var(--richtext-h2-margin-top, var(--richtext-h2-margin-top-default)) 0 var(--richtext-h2-margin-bottom, var(--richtext-h2-margin-bottom-default));
    padding-bottom: var(--richtext-h2-pad-bottom, var(--richtext-h2-pad-bottom-default));
    border-bottom: 1px solid var(--richtext-border, var(--richtext-border-default));
  }

  [data-richtext-body] h3 {
    font-size: var(--richtext-h3-size, var(--richtext-h3-size-default));
    font-weight: var(--richtext-h3-weight, var(--richtext-h3-weight-default));
    margin: var(--richtext-h3-margin-top, var(--richtext-h3-margin-top-default)) 0 var(--richtext-h3-margin-bottom, var(--richtext-h3-margin-bottom-default));
  }

  [data-richtext-body] h4 {
    font-size: var(--richtext-body-size, var(--richtext-body-size-default));
    font-weight: var(--richtext-h4-weight, var(--richtext-h4-weight-default));
    margin: var(--richtext-h4-margin-top, var(--richtext-h4-margin-top-default)) 0 var(--richtext-h4-margin-bottom, var(--richtext-h4-margin-bottom-default));
  }

  [data-richtext-body] h5 {
    font-size: var(--richtext-body-size, var(--richtext-body-size-default));
    font-weight: var(--richtext-h4-weight, var(--richtext-h4-weight-default));
    color: var(--richtext-fg-muted, var(--richtext-fg-muted-default));
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: var(--richtext-h4-margin-top, var(--richtext-h4-margin-top-default)) 0 var(--richtext-h4-margin-bottom, var(--richtext-h4-margin-bottom-default));
  }

  [data-richtext-body] h6 {
    font-size: var(--richtext-code-size, var(--richtext-code-size-default));
    font-weight: var(--richtext-h4-weight, var(--richtext-h4-weight-default));
    color: var(--richtext-fg-muted, var(--richtext-fg-muted-default));
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: var(--richtext-h4-margin-top, var(--richtext-h4-margin-top-default)) 0 var(--richtext-h4-margin-bottom, var(--richtext-h4-margin-bottom-default));
  }

  /* First-element rhythm reset — first heading shouldn't push content
     down with its top margin (already controlled at the body inset). */
  [data-richtext-body] > :first-child { margin-top: 0; }
  [data-richtext-body] > :last-child { margin-bottom: 0; }

  /* ── Body text ── */

  [data-richtext-body] p {
    font-size: var(--richtext-body-size, var(--richtext-body-size-default));
    line-height: var(--richtext-body-leading, var(--richtext-body-leading-default));
    margin: 0 0 var(--richtext-p-margin-bottom, var(--richtext-p-margin-bottom-default));
  }

  [data-richtext-body] h2 + p,
  [data-richtext-body] h3 + p {
    color: var(--richtext-fg-subtle, var(--richtext-fg-subtle-default));
  }

  /* ── Code ── */

  [data-richtext-body] code {
    background: var(--richtext-code-bg, var(--richtext-code-bg-default));
    padding: 0.1em 0.35em;
    border-radius: var(--richtext-code-radius, var(--richtext-code-radius-default));
    font-family: var(--richtext-font-code, var(--richtext-font-code-default));
    font-size: 0.875em;
  }

  [data-richtext-body] pre {
    background: var(--richtext-code-bg, var(--richtext-code-bg-default));
    border: 1px solid var(--richtext-border, var(--richtext-border-default));
    border-radius: var(--richtext-pre-radius, var(--richtext-pre-radius-default));
    padding: var(--richtext-pre-inset, var(--richtext-pre-inset-default));
    overflow-x: auto;
    font-size: var(--richtext-code-size, var(--richtext-code-size-default));
    line-height: 1.5;
    margin: var(--richtext-pre-my, var(--richtext-pre-my-default)) 0;
  }

  [data-richtext-body] pre code {
    background: none;
    padding: 0;
    font-size: inherit;
  }

  /* ── Lists ── */

  [data-richtext-body] ul,
  [data-richtext-body] ol {
    margin: var(--richtext-list-my, var(--richtext-list-my-default)) 0;
    padding-left: var(--richtext-list-indent, var(--richtext-list-indent-default));
  }

  [data-richtext-body] li {
    margin-bottom: var(--richtext-li-margin-bottom, var(--richtext-li-margin-bottom-default));
  }

  /* Nested lists — collapse the vertical block margin so children
     don't add a full paragraph gap before/after the parent <li>. */
  [data-richtext-body] li > ul,
  [data-richtext-body] li > ol {
    margin-block: var(--a-space-1);
  }

  /* ── Definition lists ── */
  [data-richtext-body] dl {
    margin: var(--richtext-list-my, var(--richtext-list-my-default)) 0;
  }
  [data-richtext-body] dt {
    font-weight: var(--richtext-strong-weight, var(--richtext-strong-weight-default));
    color: var(--richtext-fg, var(--richtext-fg-default));
    margin-top: var(--a-space-2);
  }
  [data-richtext-body] dd {
    margin: 0 0 var(--richtext-li-margin-bottom, var(--richtext-li-margin-bottom-default)) var(--richtext-list-indent, var(--richtext-list-indent-default));
    color: var(--richtext-fg-muted, var(--richtext-fg-muted-default));
  }

  /* ── Blockquote ── */
  [data-richtext-body] blockquote {
    margin: var(--richtext-block-my, var(--richtext-block-my-default)) 0;
    padding: var(--a-space-1) var(--a-space-4);
    border-inline-start: 3px solid var(--richtext-border, var(--richtext-border-default));
    color: var(--richtext-fg-muted, var(--richtext-fg-muted-default));
    font-style: italic;
  }
  [data-richtext-body] blockquote > :last-child { margin-bottom: 0; }

  /* ── Inline emphasis & semantic glyphs ── */
  [data-richtext-body] mark {
    background: var(--a-warning-muted, var(--richtext-code-bg, var(--richtext-code-bg-default)));
    color: inherit;
    padding: 0 0.2em;
    border-radius: var(--richtext-code-radius, var(--richtext-code-radius-default));
  }
  [data-richtext-body] del,
  [data-richtext-body] s {
    color: var(--richtext-fg-muted, var(--richtext-fg-muted-default));
    text-decoration: line-through;
  }
  [data-richtext-body] kbd {
    font-family: var(--richtext-font-code, var(--richtext-font-code-default));
    font-size: 0.85em;
    background: var(--richtext-code-bg, var(--richtext-code-bg-default));
    border: 1px solid var(--richtext-border, var(--richtext-border-default));
    border-bottom-width: 2px;
    border-radius: var(--richtext-code-radius, var(--richtext-code-radius-default));
    padding: 0.05em 0.4em;
    box-shadow: inset 0 -1px 0 var(--richtext-border, var(--richtext-border-default));
    white-space: nowrap;
  }
  [data-richtext-body] sup,
  [data-richtext-body] sub {
    font-size: 0.75em;
    line-height: 0;
  }
  [data-richtext-body] abbr[title] {
    text-decoration: underline dotted;
    text-underline-offset: 2px;
    cursor: help;
  }

  /* ── Media ── */
  [data-richtext-body] img,
  [data-richtext-body] video {
    max-width: 100%;
    height: auto;
    display: block;
    margin: var(--richtext-block-my, var(--richtext-block-my-default)) auto;
    border-radius: var(--richtext-pre-radius, var(--richtext-pre-radius-default));
  }
  [data-richtext-body] figure {
    margin: var(--richtext-block-my, var(--richtext-block-my-default)) 0;
  }
  [data-richtext-body] figcaption {
    font-size: var(--richtext-code-size, var(--richtext-code-size-default));
    color: var(--richtext-fg-muted, var(--richtext-fg-muted-default));
    text-align: center;
    margin-top: var(--a-space-1);
  }

  /* ── Disclosure ── */
  [data-richtext-body] details {
    margin: var(--richtext-block-my, var(--richtext-block-my-default)) 0;
    border: 1px solid var(--richtext-border, var(--richtext-border-default));
    border-radius: var(--richtext-pre-radius, var(--richtext-pre-radius-default));
    padding: var(--a-space-3) var(--a-space-4);
  }
  [data-richtext-body] details[open] {
    background: var(--richtext-code-bg, var(--richtext-code-bg-default));
  }
  [data-richtext-body] summary {
    cursor: pointer;
    font-weight: var(--richtext-strong-weight, var(--richtext-strong-weight-default));
    margin: calc(-1 * var(--a-space-3)) calc(-1 * var(--a-space-4));
    padding: var(--a-space-3) var(--a-space-4);
    list-style-position: inside;
  }
  [data-richtext-body] details[open] summary {
    margin-bottom: var(--a-space-2);
    border-bottom: 1px solid var(--richtext-border, var(--richtext-border-default));
  }

  /* ── Tables ── */

  [data-richtext-body] table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--richtext-table-my, var(--richtext-table-my-default)) 0;
    font-size: var(--richtext-body-size, var(--richtext-body-size-default));
  }

  [data-richtext-body] th,
  [data-richtext-body] td {
    text-align: left;
    padding: var(--richtext-th-py, var(--richtext-th-py-default)) var(--richtext-th-px, var(--richtext-th-px-default));
    border-bottom: 1px solid var(--richtext-border, var(--richtext-border-default));
  }

  [data-richtext-body] th {
    font-weight: var(--richtext-th-weight, var(--richtext-th-weight-default));
    color: var(--richtext-fg-muted, var(--richtext-fg-muted-default));
    font-size: var(--richtext-code-size, var(--richtext-code-size-default));
  }

  /* ── Misc ── */

  [data-richtext-body] hr {
    border: none;
    border-top: 1px solid var(--richtext-border, var(--richtext-border-default));
    margin: var(--richtext-hr-my, var(--richtext-hr-my-default)) 0;
  }

  [data-richtext-body] strong { font-weight: var(--richtext-strong-weight, var(--richtext-strong-weight-default)); }
  [data-richtext-body] em { font-style: italic; }

  [data-richtext-body] a {
    color: var(--richtext-link, var(--richtext-link-default));
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--a-duration-fast) var(--a-easing);
  }

  [data-richtext-body] a:hover {
    color: var(--richtext-link-hover, var(--richtext-link-hover-default));
  }

  [data-richtext-body] a:focus-visible {
    outline: var(--a-focus-ring);
    outline-offset: 2px;
    border-radius: var(--a-radius-sm);
  }

  [data-richtext-body] small { font-size: var(--richtext-code-size, var(--richtext-code-size-default)); color: var(--richtext-fg-muted, var(--richtext-fg-muted-default)); }
}
