/**
 * root Design System - documentation styles: prose (README-rendered content)
 *
 * Linked by `scripts/_docs-shell.mjs` on every page. Article-level typography, and the
 * code blocks and tables a README renders into - including the copy button
 * `scripts/_docs-generate.mjs` puts above every fenced block. Same constraints as the
 * rest of the shell: zero CSS classes - element, `[data-part]` and attribute selectors
 * only - zero inline styles, and every value a root foundation token.
 */

/* Every selector below excludes `[data-part="preview"]` for the same reason
   `article table:not([is])` already does further down: a live demo card sits inside
   the same `<article>` as the README prose around it, and a component that composes a
   real heading, paragraph or link of its own - Dialog's `<h2>` title, its header/footer
   `<p>`, EmptyState's body - shares that element with it. These rules are unlayered,
   so without the exclusion they beat every `@layer root.components.*` declaration the
   component makes regardless of specificity - measured on Dialog's own title, forced to
   `4xl` (28.8px) by `article h2` in place of the `xl` (20.25px) `--root-dialog--title
   --font-size` actually declares. */
article h1:not([data-part="preview"] h1) {
  margin: 0 0 var(--root-s--2xs);
  font-size: var(--root-t--font-size--5xl);
}

article h2:not([data-part="preview"] h2) {
  margin: 0 0 var(--root-s--sm);
  font-size: var(--root-t--font-size--4xl);
}

article h3:not([data-part="preview"] h3) {
  margin: var(--root-s--2xl) 0 var(--root-s--sm);
  font-size: var(--root-t--font-size--xl);
}

article p:not([data-part="preview"] p) {
  color: var(--docs-text);
}

/* Also not `[data-part="heading-anchor"]` - the link ADR-029 wraps every `h2`/`h3`
   in, which must not look like a link (`_heading-anchors.css` sets its own `color:
   inherit`). That rule loses the specificity fight to this one now that the
   `:not([data-part="preview"] a)` exclusion above raises this selector's own
   specificity past a bare `[data-part="heading-anchor"]` - measured: every heading's
   text painted in the link color, with nothing left to tell it apart from its own
   `::after` glyph, which is the one thing meant to carry that color. */
article a:not([data-part="preview"] a, [data-part="heading-anchor"]) {
  color: light-dark(var(--root-c--default-400--light), var(--root-c--default-300--dark));
}

/* ── Code & tables (README-rendered) ────────────────────────────────────── */
/* One step down from the line it sits in, written in `em` and the ratio rather than taken
   from the ramp: inline code sits inside a paragraph, a heading or a table cell, and it
   should be slightly smaller than *that* rather than one fixed size everywhere. The ramp is
   absolute now (ADR-045), so a step off it would pin every code span to 14.2px whatever it
   is inside. This and the heading anchor in `_heading-anchors.css` are the two places on the
   site that mean the relative reading. */
article :not(pre) > code {
  padding: var(--root-s--5xs) var(--root-s--3xs);
  font-family: var(--root-t--font-family, monospace);
  font-size: calc(1em / var(--root-t--ratio));
  /* Tracking follows the line it sits in: the foundations correct `<code>` off the user
     agent, and `normal` is part of that correction - right for a code block, wrong for a
     word inside a heading or a lead-in that is tracked on purpose. */
  letter-spacing: inherit;
  background: var(--docs-accent-weak);
  border-radius: var(--root-r--2xs);
}

/* A code block's own ground and frame, not `--docs-elevated` and `--docs-border`.
   Those two are the *card* pair - a surface lifting off the page - and measured on a
   snippet they read as neither: under a light scheme the block came out a muddy 91%
   grey against a white page, heavier than the prose it sits between, and under a dark
   one `--docs-elevated` mixes toward `--root-c--default-800--dark`, so a saturated
   navy block (#0f1658) sat on the page's neutral #212121 ground with a warm-grey
   #635454 frame around it - three different hues in one figure.

   One step off the page's own ground in each scheme instead, both neutral: 96%
   lightness under light, 16% under dark against the ground's 13%. The frame is the
   next step out, the same `neutral-800--dark` the dialog's frame settled on. */
[data-part="snippet"] {
  --docs-code-bg: light-dark(var(--root-c--neutral-100--light), var(--root-c--neutral-900--dark));
  --docs-code-border: light-dark(var(--root-c--neutral-200--light), var(--root-c--neutral-800--dark));

  /* The wrapper carries the block's margin so the button can be positioned against the
     frame's own corner rather than against a box with margin collapsed into it. */
  position: relative;
  margin: var(--root-s--md) 0;
}

article [data-part="snippet"] > pre {
  margin: 0;
  padding: var(--root-s--md);
  /* Room for the button, so the first line of a snippet does not run under it. Only the
     resting case can be reserved this way - the block scrolls, and a line long enough to
     scroll passes beneath the control, which is why the button carries the block's own
     ground below rather than sitting on nothing. */
  padding-inline-end: calc(var(--root-s--md) + var(--root-button--sm--block-size));
  overflow-x: auto;
  font-size: var(--root-t--font-size--sm);
  line-height: var(--root-t--line-height--base);
  background: var(--docs-code-bg);
  border: 1px solid var(--docs-code-border);
  border-radius: var(--root-r--md);

  code {
    font-family: ui-monospace, "SF Mono", monospace;
  }
}

/* Prose tables only - the attribute tables in a README. A component's own table is
   `[is="root-…"]`, and these rules are unlayered, so without the exclusion they beat
   every `@layer root.components.*` declaration the component makes: the data table on
   its own page was drawn as a docs table, collapsed borders, square corners and all. */
article table:not([is]) {
  width: 100%;
  margin: var(--root-s--md) 0;
  border-collapse: collapse;
  font-size: var(--root-t--font-size--sm);

  :is(th, td) {
    padding: var(--root-s--2xs) var(--root-s--sm);
    text-align: left;
    border-bottom: 1px solid var(--docs-border);
  }
}

/* Same exclusion as `table` above, and for the same reason: the data table's own
   `<th>` is this element too, and this rule is unlayered. */
article th:not([data-part="preview"] th) {
  font-weight: 600;
  color: var(--docs-muted);
}

/* The copy button sits on the snippet it copies, at the frame's top-inline-end corner
   rather than on a line of its own above it: a control per block, stacked above thirty
   blocks, is a row of furniture down the page, and the corner is where a reader who has
   just finished reading the snippet is already looking.

   It keeps the block's own ground under it - `tertiary` paints none at rest - because
   the block scrolls: a line long enough to scroll passes underneath, and a glyph with
   nothing behind it is then drawn over code. First child in the DOM, so the keyboard
   reaches the control before the lines it acts on, and so `bindCopyButtons()` still
   finds its block as `nextElementSibling`. */
[data-part="copy"] {
  position: absolute;
  inset-block-start: var(--root-s--3xs);
  inset-inline-end: var(--root-s--3xs);
  z-index: 1;

  --root-button--background-color: var(--docs-code-bg);
}