/* ============================================
   Code — inline / block code display primitive.

   <xm-code> presents code verbatim using the JetBrains Mono
   typescale (--xm-typescale-mono-*). Inline by default; the
   `block` modifier wraps it in a <pre> for a small code block.

   A recessed surface-container-* backplate raised off the host,
   a hairline 1px outline-variant border, ink --md-sys-color-on-surface
   matched to the backplate (AD-13). Presentational chrome — never a
   status hue (AD-11).
   ============================================ */

.code {
  box-sizing: border-box;
  padding: 1px var(--s-2);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-extra-small);
  background: var(--md-sys-color-surface-container-low);
  color: var(--md-sys-color-on-surface);
  font-family: var(--xm-typescale-mono-font);
  font-size: var(--xm-typescale-mono-size);
  font-weight: var(--xm-typescale-mono-weight);
  line-height: var(--xm-typescale-mono-line-height);
  letter-spacing: var(--xm-typescale-mono-tracking);
  white-space: nowrap;
  vertical-align: baseline;
}

/* Block — recessed code panel. Wraps, scrolls horizontally if needed,
   and uses the small corner + more padding of a panel rather than an
   inline token. */
.code--block {
  display: block;
  margin: 0;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-surface-container-low);
  white-space: pre;
  overflow-x: auto;
  tab-size: 2;
}