/**
 * ROLE — STRUCTURE ONLY for the prose pattern: what every reader needs whatever
 *        the brand — links are underlined (never colour-only) with a visible focus
 *        ring, long URLs wrap, lists keep their markers, media never exceed the
 *        column, footnote marks do not break the line, the measure, and the
 *        vertical-rhythm MECHANISM (the recipe sets its values per density).
 * NEVER — a look: no colour, font, size, border, radius, shadow or spacing value.
 *         Zero specificity (:where) in @layer structure, so a recipe always wins.
 * CONTRACT — docs/patterns/README.md; architecture reference DS-019/DS-020.
 * OWNER — platform (bigfluffy-platform), consumed by every child.
 *
 * Recipe knobs:
 *   --prose-flow            space between blocks (set per [data-density])
 *   --prose-flow-heading    space above a heading (defaults to 2 × --prose-flow)
 *   --prose-flow-tight      space inside lists and between a heading and its text
 *   --prose-list-indent     list indent
 *   --prose-link-thickness  underline thickness (a border-family token)
 *   --prose-link-offset     underline offset (a space-family token)
 *   --prose-focus-color     focus ring colour (defaults to currentColor)
 *   --prose-focus-width / --prose-focus-offset  focus ring width and offset (2px, 2px)
 *   --prose-ink-rule-hover-ground  the ink-rule recipe's link hover ground
 *   --prose-external-glyph  the external-link cue, a string (default "↗")
 *   --prose-external-gap    space before the cue
 *   --prose-measure-narrow / --prose-measure-regular / --prose-measure-wide
 */

@layer structure {
  :where([data-pattern="prose"]) {
    --article-h2-size: var(--text-section);
    --article-h3-size: var(--text-sub);
    --prose-measure-regular: var(--measure);
    --prose-measure-narrow: 56ch;
    --prose-measure-wide: 80ch;
    --prose-flow: var(--space-md);
    --prose-flow-heading: calc(2 * var(--prose-flow));
    --prose-flow-tight: calc(0.5 * var(--prose-flow));
    --prose-link-thickness: from-font;
    --prose-link-offset: auto;
    --prose-focus-color: currentColor;
    --prose-focus-width: 2px;
    --prose-focus-offset: 2px;
    --prose-ink-rule-hover-ground: color-mix(in oklab, var(--color-accent) 14%, transparent);
    --prose-external-glyph: "\2197";
    --prose-external-gap: calc(var(--space-md) * 0.15);
    --prose-list-indent: calc(var(--space-md) * 1.5);
    overflow-wrap: break-word;
  }

  /* ── Measure ─────────────────────────────────────────────────────────────── */
  :where([data-pattern="prose"][data-measure="regular"]) {
    max-inline-size: var(--prose-measure-regular);
  }
  :where([data-pattern="prose"][data-measure="narrow"]) {
    max-inline-size: var(--prose-measure-narrow);
  }
  :where([data-pattern="prose"][data-measure="wide"]) {
    max-inline-size: var(--prose-measure-wide);
  }

  /* ── Rhythm: one mechanism, the recipe sets the values ───────────────────── */
  :where([data-pattern="prose"][data-flow="block"] > *) {
    margin-block: 0;
  }
  :where([data-pattern="prose"][data-flow="block"] > * + *) {
    margin-block-start: var(--prose-flow);
  }
  :where([data-pattern="prose"][data-flow="block"] > * + :is(h2, h3, h4, h5, h6)) {
    margin-block-start: var(--prose-flow-heading);
  }
  :where([data-pattern="prose"][data-flow="block"] > :is(h2, h3, h4, h5, h6) + *) {
    margin-block-start: var(--prose-flow-tight);
  }

  /* ── Links: underlined, visibly focused, never overflowing ──────────────────── */
  :where([data-pattern="prose"] a) {
    text-decoration-line: underline;
    text-decoration-thickness: var(--prose-link-thickness);
    text-underline-offset: var(--prose-link-offset);
    text-decoration-skip-ink: auto;
    overflow-wrap: anywhere;
  }
  :where([data-pattern="prose"] a:focus-visible) {
    outline: var(--prose-focus-width) solid var(--prose-focus-color);
    outline-offset: var(--prose-focus-offset);
  }
  /* The external cue is generated content with ALTERNATIVE TEXT: the glyph is
     seen, the translated words are heard (CSS content alt text). */
  :where([data-pattern="prose"] a[data-external])::after {
    content: var(--prose-external-glyph) / attr(data-external-label);
    display: inline-block;
    margin-inline-start: var(--prose-external-gap);
    text-decoration: none;
  }

  /* ── Lists keep their markers (the reset strips them) ───────────────────────── */
  :where([data-pattern="prose"] :is(ul, ol)) {
    padding-inline-start: var(--prose-list-indent);
  }
  :where([data-pattern="prose"] ul) {
    list-style: disc;
  }
  :where([data-pattern="prose"] ol) {
    list-style: decimal;
  }
  :where([data-pattern="prose"] :is(ul, ol) :is(ul, ol)) {
    margin-block: var(--prose-flow-tight) 0;
  }
  :where([data-pattern="prose"] ul ul) {
    list-style: circle;
  }
  :where([data-pattern="prose"] li + li) {
    margin-block-start: var(--prose-flow-tight);
  }

  /* ── Quotes, rules, media, code, tables ─────────────────────────────────────── */
  :where([data-pattern="prose"] :is(blockquote, figure)) {
    margin-inline: 0;
  }
  :where([data-pattern="prose"] dd) {
    margin-inline: var(--prose-list-indent) 0;
  }
  :where([data-pattern="prose"] dd + dt) {
    margin-block-start: var(--prose-flow-tight);
  }
  :where([data-pattern="prose"] address) {
    font-style: inherit;
  }
  :where([data-pattern="prose"] hr) {
    border: 0;
  }
  :where([data-pattern="prose"] :is(img, video, svg, iframe)) {
    max-inline-size: 100%;
    block-size: auto;
  }
  :where([data-pattern="prose"] img) {
    display: block;
  }
  :where([data-pattern="prose"] pre) {
    overflow-x: auto;
    white-space: pre;
  }
  :where([data-pattern="prose"] :not(pre) > code) {
    overflow-wrap: anywhere;
  }
  :where([data-pattern="prose"] [data-part="prose-table-scroll"]) {
    max-inline-size: 100%;
    overflow-x: auto;
  }
  :where([data-pattern="prose"] table) {
    inline-size: 100%;
    border-collapse: collapse;
    table-layout: auto;
  }
  :where([data-pattern="prose"] :is(th, td)) {
    text-align: start;
    vertical-align: top;
    overflow-wrap: break-word;
    hyphens: manual;
  }
  :where([data-pattern="prose"] :is(th, td) :is(a, code)) {
    overflow-wrap: break-word;
    hyphens: manual;
  }

  /* ── Footnotes and citations ────────────────────────────────────────────────── */
  :where([data-pattern="prose"] sup) {
    line-height: 0;
  }
  :where([data-pattern="prose"] :is(sup a, a[data-footnote-ref])) {
    text-decoration-line: none;
  }
}

/**
 * ROLE — the prose pattern's STARTER SET: four well-worn rich-text looks a child
 *        picks from (`recipe="reading" | "docs" | "editorial" | "ink-rule"`). They
 *        compose with the pattern's variants `data-density` (the rhythm) and
 *        `data-measure` (the line length).
 * NEVER — a colour, font, radius or shadow of its own: semantic colour roles, the
 *         brand's type/shape roles with neutral fallbacks, the enforced type
 *         scale (--article-h2-size / --article-h3-size).
 * CONTRACT — docs/patterns/README.md § "Starters". :where() selectors in
 *            @layer components: a brand rule always wins. Underline thickness
 *            reads --rule-weight until the text-decoration token family (PR 715)
 *            lands.
 * OWNER — platform (bigfluffy-platform), shipped to every child.
 */

@layer components {
  /* Stored brand colour ids: the former accent and colour classes, unchanged. */
  :where([data-pattern="prose"] [data-brand-color]) {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: var(--weight-body);
    letter-spacing: var(--tracking-body);
  }
  :where(
    [data-pattern="prose"] [data-brand-color="primary"],
    [data-pattern="prose"] [data-brand-color="primary-strong"]
  ) {
    color: var(--color-accent-fg);
  }
  :where([data-pattern="prose"] [data-brand-color="accent"]) {
    color: var(--color-highlight-fg);
  }
  :where([data-pattern="prose"] [data-brand-color="info"]) {
    color: var(--color-info-fg);
  }
  :where([data-pattern="prose"] [data-brand-color="muted"]) {
    color: var(--color-fg-muted);
  }

  /* ── Density drives the rhythm knobs prose.css reads ───────────────────────── */
  :where([data-pattern="prose"]) {
    --prose-flow: calc(var(--space-md) * 1.1);
    --prose-flow-heading: calc(var(--space-md) * 1.8);
    --prose-flow-tight: calc(var(--space-md) * 0.4);
  }
  :where([data-pattern="prose"][data-density="compact"]) {
    --prose-flow: calc(var(--space-md) * 0.7);
    --prose-flow-heading: calc(var(--space-md) * 1.3);
    --prose-flow-tight: calc(var(--space-md) * 0.25);
  }
  :where([data-pattern="prose"][data-density="relaxed"]) {
    --prose-flow: calc(var(--space-md) * 1.5);
    --prose-flow-heading: calc(var(--space-md) * 2.4);
    --prose-flow-tight: calc(var(--space-md) * 0.55);
  }

  /* ── Shared by every starter ───────────────────────────────────────────────── */
  :where(
    [data-pattern="prose"]:is(
      [data-recipe="reading"],
      [data-recipe="docs"],
      [data-recipe="editorial"],
      [data-recipe="ink-rule"]
    )
  ) {
    --prose-link-thickness: var(--rule-weight);
    --prose-link-offset: 0.2em;
    --prose-focus-color: var(--color-focus-ring);
  }
  :where(
    [data-pattern="prose"]:is(
        [data-recipe="reading"],
        [data-recipe="docs"],
        [data-recipe="editorial"],
        [data-recipe="ink-rule"]
      )
      :is(h2, h3, h4, h5, h6)
  ) {
    font-family: var(--font-display);
    font-weight: var(--weight-display);
    letter-spacing: var(--tracking-display);
    line-height: calc(var(--leading-body) * 0.774194);
    color: var(--color-fg);
  }
  :where(
    [data-pattern="prose"]:is(
        [data-recipe="reading"],
        [data-recipe="docs"],
        [data-recipe="editorial"],
        [data-recipe="ink-rule"]
      )
      h2
  ) {
    font-size: var(--article-h2-size);
  }
  :where(
    [data-pattern="prose"]:is(
        [data-recipe="reading"],
        [data-recipe="docs"],
        [data-recipe="editorial"],
        [data-recipe="ink-rule"]
      )
      h3
  ) {
    font-size: var(--article-h3-size);
  }
  :where(
    [data-pattern="prose"]:is(
        [data-recipe="reading"],
        [data-recipe="docs"],
        [data-recipe="editorial"],
        [data-recipe="ink-rule"]
      )
      :is(h4, h5, h6)
  ) {
    font-size: var(--text-lede);
  }
  :where(
    [data-pattern="prose"]:is(
        [data-recipe="reading"],
        [data-recipe="docs"],
        [data-recipe="editorial"],
        [data-recipe="ink-rule"]
      )
      a
  ) {
    color: var(--color-accent-fg);
    text-decoration-color: color-mix(in oklab, currentColor 50%, transparent);
  }
  :where(
    [data-pattern="prose"]:is(
        [data-recipe="reading"],
        [data-recipe="docs"],
        [data-recipe="editorial"],
        [data-recipe="ink-rule"]
      )
      a:hover
  ) {
    text-decoration-color: currentColor;
    text-decoration-thickness: calc(2 * var(--rule-weight));
  }
  :where(
    [data-pattern="prose"]:is(
        [data-recipe="reading"],
        [data-recipe="docs"],
        [data-recipe="editorial"],
        [data-recipe="ink-rule"]
      )
      a:visited
  ) {
    color: color-mix(in oklab, var(--color-accent-fg) 72%, var(--color-fg));
  }
  :where(
    [data-pattern="prose"]:is(
        [data-recipe="reading"],
        [data-recipe="docs"],
        [data-recipe="editorial"],
        [data-recipe="ink-rule"]
      )
      a:active
  ) {
    color: var(--color-fg);
  }
  :where(
    [data-pattern="prose"]:is(
        [data-recipe="reading"],
        [data-recipe="docs"],
        [data-recipe="editorial"],
        [data-recipe="ink-rule"]
      )
      li
  )::marker {
    color: var(--color-accent-fg);
  }
  :where(
    [data-pattern="prose"]:is(
        [data-recipe="reading"],
        [data-recipe="docs"],
        [data-recipe="editorial"],
        [data-recipe="ink-rule"]
      )
      figcaption
  ) {
    margin-block-start: calc(var(--space-md) * 0.5);
    font-size: var(--text-small);
    line-height: var(--leading-body);
    color: var(--color-fg-muted);
  }
  :where(
    [data-pattern="prose"]:is(
        [data-recipe="reading"],
        [data-recipe="docs"],
        [data-recipe="editorial"],
        [data-recipe="ink-rule"]
      )
      code
  ) {
    font-family: var(--font-mono);
    font-size: calc(var(--text-body) * 0.9);
  }
  :where(
    [data-pattern="prose"]:is(
        [data-recipe="reading"],
        [data-recipe="docs"],
        [data-recipe="editorial"],
        [data-recipe="ink-rule"]
      )
      hr
  ) {
    block-size: var(--rule-weight);
    background: var(--color-line);
  }
  :where(
    [data-pattern="prose"]:is(
        [data-recipe="reading"],
        [data-recipe="docs"],
        [data-recipe="editorial"],
        [data-recipe="ink-rule"]
      )
      :is(th, td)
  ) {
    padding: calc(var(--space-md) * 0.55) calc(var(--space-md) * 0.8) calc(var(--space-md) * 0.55) 0;
    border-block-end: var(--rule-weight) solid var(--color-line);
  }
  :where(
    [data-pattern="prose"]:is(
        [data-recipe="reading"],
        [data-recipe="docs"],
        [data-recipe="editorial"],
        [data-recipe="ink-rule"]
      )
      table
  ) {
    font-size: var(--text-small);
    line-height: var(--leading-body);
  }
  :where(
    [data-pattern="prose"]:is(
        [data-recipe="reading"],
        [data-recipe="docs"],
        [data-recipe="editorial"],
        [data-recipe="ink-rule"]
      )
      th
  ) {
    font-family: var(--font-label);
    font-weight: var(--weight-label);
  }
  :where(
    [data-pattern="prose"]:is(
        [data-recipe="reading"],
        [data-recipe="docs"],
        [data-recipe="editorial"],
        [data-recipe="ink-rule"]
      )
      :is(sup a, a[data-footnote-ref])
  ) {
    font-size: calc(var(--text-body) * 0.75);
    font-weight: var(--weight-semibold);
  }
  :where(
    [data-pattern="prose"]:is(
        [data-recipe="reading"],
        [data-recipe="docs"],
        [data-recipe="editorial"],
        [data-recipe="ink-rule"]
      )
      section[data-footnotes]
  ) {
    padding-block-start: var(--space-md);
    border-block-start: var(--rule-weight) solid var(--color-line);
    font-size: var(--text-small);
    color: var(--color-fg-muted);
  }

  /* ── reading: the long-form default ─────────────────────────────────────────── */
  :where([data-pattern="prose"][data-recipe="reading"][data-flow="block"]) {
    font-size: inherit;
    line-height: var(--leading-body);
  }
  :where([data-pattern="prose"][data-recipe="reading"] blockquote) {
    padding-inline-start: calc(var(--space-md) * 1.1);
    border-inline-start: calc(3 * var(--rule-weight)) solid var(--color-accent-subtle);
    color: var(--color-fg-muted);
    font-style: italic;
  }
  :where([data-pattern="prose"][data-recipe="reading"] :is(.pull-quote, [data-part="pull-quote"])) {
    padding-block: calc(var(--space-md) * 0.4);
    border: 0;
    font-family: var(--font-display);
    font-size: var(--text-section);
    font-style: normal;
    line-height: calc(var(--leading-body) * 0.83871);
    color: var(--color-fg);
  }
  :where([data-pattern="prose"][data-recipe="reading"] :is(img, pre)) {
    border-radius: var(--radius-panel);
  }
  :where([data-pattern="prose"][data-recipe="reading"] :not(pre) > code) {
    padding: calc(var(--space-md) * 0.1) calc(var(--space-md) * 0.35);
    border-radius: var(--radius-control);
    background: var(--color-surface);
  }
  :where([data-pattern="prose"][data-recipe="reading"] pre) {
    padding: var(--space-md) calc(var(--space-md) * 1.25);
    background: var(--color-surface);
    line-height: var(--leading-body);
  }

  /* ── docs: smaller, tighter, built for reference pages and code ─────────────── */
  :where([data-pattern="prose"][data-recipe="docs"][data-flow="block"]) {
    --prose-flow: calc(var(--space-md) * 0.8);
    --prose-flow-heading: calc(var(--space-md) * 1.6);
    font-size: var(--text-body);
    line-height: var(--leading-body);
  }
  :where([data-pattern="prose"][data-recipe="docs"] :is(h2, h3)) {
    font-family: var(--font-body);
    font-weight: var(--weight-semibold);
    letter-spacing: 0;
  }
  :where([data-pattern="prose"][data-recipe="docs"] h2) {
    font-size: var(--text-sub);
    padding-block-end: calc(var(--space-md) * 0.3);
    border-block-end: var(--rule-weight) solid var(--color-line);
  }
  :where([data-pattern="prose"][data-recipe="docs"] h3) {
    font-size: var(--text-body);
  }
  :where([data-pattern="prose"][data-recipe="docs"] blockquote) {
    padding: calc(var(--space-md) * 0.7) var(--space-md);
    border-inline-start: calc(3 * var(--rule-weight)) solid var(--color-info-fg);
    border-radius: var(--radius-control);
    background: var(--color-info-surface);
  }
  :where([data-pattern="prose"][data-recipe="docs"] :not(pre) > code) {
    padding: calc(var(--space-md) * 0.05) calc(var(--space-md) * 0.3);
    border: var(--rule-weight) solid var(--color-line);
    border-radius: var(--radius-control);
    background: var(--color-surface);
  }
  :where([data-pattern="prose"][data-recipe="docs"] pre) {
    padding: calc(var(--space-md) * 0.9) var(--space-md);
    border: var(--rule-weight) solid var(--color-line);
    border-radius: var(--radius-control);
    background: var(--color-surface);
    line-height: calc(var(--leading-body) * 0.967742);
  }
  :where([data-pattern="prose"][data-recipe="docs"] table) {
    border: var(--rule-weight) solid var(--color-line);
  }
  :where([data-pattern="prose"][data-recipe="docs"] :is(th, td)) {
    padding-inline: calc(var(--space-md) * 0.8);
  }
  :where([data-pattern="prose"][data-recipe="docs"] th) {
    background: var(--color-surface);
  }

  /* ── editorial: magazine rhythm — display lede, hanging quotes, big pull-quote ─ */
  :where([data-pattern="prose"][data-recipe="editorial"][data-flow="block"]) {
    font-size: var(--text-lede);
    line-height: var(--leading-body);
  }
  :where([data-pattern="prose"][data-recipe="editorial"][data-flow="block"] > p:first-child) {
    font-family: var(--font-display);
    font-size: var(--text-sub);
    line-height: calc(var(--leading-body) * 0.967742);
    color: var(--color-fg);
  }
  :where([data-pattern="prose"][data-recipe="editorial"] h2) {
    font-size: var(--article-h2-size);
    letter-spacing: calc(var(--tracking-tight) * 1.2);
  }
  :where([data-pattern="prose"][data-recipe="editorial"] blockquote) {
    position: relative;
    padding-inline-start: calc(var(--space-md) * 1.4);
    font-family: var(--font-display);
    font-size: var(--text-sub);
    line-height: calc(var(--leading-body) * 0.935484);
  }
  :where([data-pattern="prose"][data-recipe="editorial"] blockquote)::before {
    content: "\201C";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: -0.15em;
    color: var(--color-accent);
    font-size: var(--text-stat);
    line-height: calc(var(--leading-body) * 0.645161);
  }
  :where(
    [data-pattern="prose"][data-recipe="editorial"] :is(.pull-quote, [data-part="pull-quote"])
  ) {
    margin-inline: auto;
    padding-block: calc(var(--space-md) * 0.6);
    border-block: calc(2 * var(--rule-weight)) solid var(--color-accent);
    font-family: var(--font-display);
    font-size: var(--text-page);
    line-height: calc(var(--leading-body) * 0.774194);
    text-align: center;
  }
  :where([data-pattern="prose"][data-recipe="editorial"] hr) {
    inline-size: 4em;
    margin-inline: auto;
    block-size: calc(2 * var(--rule-weight));
    background: var(--color-accent);
  }
  :where([data-pattern="prose"][data-recipe="editorial"] figcaption) {
    font-style: italic;
  }
  :where([data-pattern="prose"][data-recipe="editorial"] :not(pre) > code) {
    padding: 0 calc(var(--space-md) * 0.25);
    background: var(--color-surface);
  }
  :where([data-pattern="prose"][data-recipe="editorial"] pre) {
    padding: var(--space-md) calc(var(--space-md) * 1.25);
    background: var(--color-surface);
    font-size: var(--text-small);
  }

  /* ── ink-rule: headings open on an ink rule, mono labels (Ruled editorial typography) */
  :where([data-pattern="prose"][data-recipe="ink-rule"]) {
    --prose-list-indent: calc(var(--space-md) * 1.25);
    --prose-link-thickness: calc(2 * var(--rule-weight));
    --prose-link-offset: 0.25em;
    --prose-focus-color: var(--color-fg);
    --prose-external-glyph: "\2192";
  }
  :where([data-pattern="prose"][data-recipe="ink-rule"][data-flow="block"]) {
    font-size: var(--text-body);
    line-height: var(--leading-body);
  }
  :where([data-pattern="prose"][data-recipe="ink-rule"] :is(h2, h3, h4, h5, h6)) {
    padding-block-start: calc(var(--space-md) * 0.6);
    border-block-start: var(--rule-weight) solid var(--color-fg);
    line-height: calc(var(--leading-body) * 0.806452);
  }
  :where([data-pattern="prose"][data-recipe="ink-rule"] :is(h4, h5, h6)) {
    border-block-start-color: var(--color-line);
    font-family: var(--font-mono);
    font-size: var(--text-ui-sm);
    letter-spacing: calc(var(--tracking-tight) * -3.2);
    text-transform: var(--case-upper);
  }
  :where([data-pattern="prose"][data-recipe="ink-rule"] ul) {
    list-style: square;
  }
  :where([data-pattern="prose"][data-recipe="ink-rule"] li)::marker {
    color: var(--color-fg);
    font-family: var(--font-mono);
    font-size: calc(var(--text-body) * 0.85);
  }
  :where([data-pattern="prose"][data-recipe="ink-rule"] a) {
    color: var(--color-fg);
    text-decoration-color: var(--color-accent);
  }
  :where([data-pattern="prose"][data-recipe="ink-rule"] a:hover) {
    background: var(--prose-ink-rule-hover-ground);
  }
  :where([data-pattern="prose"][data-recipe="ink-rule"] a:visited) {
    color: var(--color-fg);
    text-decoration-color: var(--color-fg-muted);
  }
  :where([data-pattern="prose"][data-recipe="ink-rule"] blockquote) {
    padding: calc(var(--space-md) * 0.9) calc(var(--space-md) * 1.1);
    border: var(--rule-weight) solid var(--color-line);
    border-inline-start: calc(3 * var(--rule-weight)) solid var(--color-fg);
  }
  :where(
    [data-pattern="prose"][data-recipe="ink-rule"] :is(.pull-quote, [data-part="pull-quote"])
  ) {
    padding: calc(var(--space-md) * 0.4) 0;
    border: 0;
    border-block: var(--rule-weight) solid var(--color-fg);
    font-family: var(--font-display);
    font-size: var(--text-sub);
  }
  :where(
    [data-pattern="prose"][data-recipe="ink-rule"] :is(figcaption, th, section[data-footnotes])
  ) {
    font-family: var(--font-mono);
    font-size: var(--text-ui-sm);
    letter-spacing: calc(var(--tracking-tight) * -2);
  }
  :where([data-pattern="prose"][data-recipe="ink-rule"] th) {
    text-transform: var(--case-upper);
    font-weight: var(--weight-normal);
  }
  :where([data-pattern="prose"][data-recipe="ink-rule"] img) {
    border: var(--rule-weight) solid var(--color-line);
  }
  :where([data-pattern="prose"][data-recipe="ink-rule"] :not(pre) > code) {
    padding: 0 calc(var(--space-md) * 0.25);
    border: var(--rule-weight) solid var(--color-line);
  }
  :where([data-pattern="prose"][data-recipe="ink-rule"] pre) {
    padding: calc(var(--space-md) * 0.9) var(--space-md);
    border: var(--rule-weight) solid var(--color-fg);
    line-height: calc(var(--leading-body) * 0.967742);
  }
  :where([data-pattern="prose"][data-recipe="ink-rule"] hr) {
    block-size: 0;
    background: none;
    border-block-start: calc(3 * var(--rule-weight)) double var(--color-fg);
  }
  :where([data-pattern="prose"][data-recipe="ink-rule"] table) {
    border-block: var(--rule-weight) solid var(--color-fg);
  }
  :where([data-pattern="prose"][data-recipe="ink-rule"] section[data-footnotes]) {
    border-block-start-color: var(--color-fg);
  }
}