/* ═══════════════════════════════════════════════════════════════
   BLOCKQUOTE-UI — Styled quotation block with left rule + cite line.
   ═══════════════════════════════════════════════════════════════ */

@scope (blockquote-ui) {
  :where(:scope) {
    /* ── Tokens ── */
    --blockquote-rule-color:  var(--a-border-strong);
    --blockquote-rule-width:  2px;
    --blockquote-pad-inline:  var(--a-space-3);
    --blockquote-pad-block:   var(--a-space-2);
    --blockquote-fg:          var(--a-fg-subtle);
    --blockquote-cite-fg:     var(--a-fg-muted);
    --blockquote-cite-size:   var(--a-ui-sm);
    --blockquote-cite-mt:     var(--a-space-2);
  }

  :scope {
    box-sizing: border-box;
    display: block;
    padding-inline-start: var(--blockquote-pad-inline);
    padding-block: var(--blockquote-pad-block);
    border-inline-start: var(--blockquote-rule-width)
                        solid
                        var(--blockquote-rule-color);
    color: var(--blockquote-fg);
    font-style: italic;
    /* Reset native margin if a consumer wraps in a native <blockquote>
       (not recommended — see yaml a2ui rule #3) so nesting renders
       reasonably. */
    margin: 0;
  }

  /* Cite line — em-dash prefix + small + muted + non-italic */
  [slot="cite"] {
    display: block;
    margin-top: var(--blockquote-cite-mt);
    font-style: normal;
    font-size: var(--blockquote-cite-size);
    color: var(--blockquote-cite-fg);
  }

  [slot="cite"]::before {
    content: "— ";
  }
}
