/* ═══════════════════════════════════════════════════════════════
   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:      45rem;
    --richtext-px:             var(--a-space-6);
    --richtext-py:             var(--a-space-8);

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

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

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

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

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

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

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

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

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

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

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

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

  /* ── Body container ── */

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

  /* ── Headings ── */

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

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

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

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

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

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

  /* 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);
    line-height: var(--richtext-body-leading);
    margin: 0 0 var(--richtext-p-margin-bottom);
  }

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

  /* ── Code ── */

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

  [data-richtext-body] pre {
    background: var(--richtext-code-bg);
    border: 1px solid var(--richtext-border);
    border-radius: var(--richtext-pre-radius);
    padding: var(--richtext-pre-inset);
    overflow-x: auto;
    font-size: var(--richtext-code-size);
    line-height: 1.5;
    margin: var(--richtext-pre-my) 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) 0;
    padding-left: var(--richtext-list-indent);
  }

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

  /* 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) 0;
  }
  [data-richtext-body] dt {
    font-weight: var(--richtext-strong-weight);
    color: var(--richtext-fg);
    margin-top: var(--a-space-2);
  }
  [data-richtext-body] dd {
    margin: 0 0 var(--richtext-li-margin-bottom) var(--richtext-list-indent);
    color: var(--richtext-fg-muted);
  }

  /* ── Blockquote ── */
  [data-richtext-body] blockquote {
    margin: var(--richtext-block-my) 0;
    padding: var(--a-space-1) var(--a-space-4);
    border-inline-start: 3px solid var(--richtext-border);
    color: var(--richtext-fg-muted);
    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));
    color: inherit;
    padding: 0 0.2em;
    border-radius: var(--richtext-code-radius);
  }
  [data-richtext-body] del,
  [data-richtext-body] s {
    color: var(--richtext-fg-muted);
    text-decoration: line-through;
  }
  [data-richtext-body] kbd {
    font-family: var(--richtext-font-code);
    font-size: 0.85em;
    background: var(--richtext-code-bg);
    border: 1px solid var(--richtext-border);
    border-bottom-width: 2px;
    border-radius: var(--richtext-code-radius);
    padding: 0.05em 0.4em;
    box-shadow: inset 0 -1px 0 var(--richtext-border);
    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) auto;
    border-radius: var(--richtext-pre-radius);
  }
  [data-richtext-body] figure {
    margin: var(--richtext-block-my) 0;
  }
  [data-richtext-body] figcaption {
    font-size: var(--richtext-code-size);
    color: var(--richtext-fg-muted);
    text-align: center;
    margin-top: var(--a-space-1);
  }

  /* ── Disclosure ── */
  [data-richtext-body] details {
    margin: var(--richtext-block-my) 0;
    border: 1px solid var(--richtext-border);
    border-radius: var(--richtext-pre-radius);
    padding: var(--a-space-3) var(--a-space-4);
  }
  [data-richtext-body] details[open] {
    background: var(--richtext-code-bg);
  }
  [data-richtext-body] summary {
    cursor: pointer;
    font-weight: var(--richtext-strong-weight);
    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);
  }

  /* ── Tables ── */

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

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

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

  /* ── Misc ── */

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

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

  [data-richtext-body] a {
    color: var(--richtext-link);
    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);
  }

  [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); color: var(--richtext-fg-muted); }
}
