/* Code block: compact header, horizontally scrolling body (or wrapped with the wrap option), optional line numbers and highlighted lines.
   Syntax colour changes only colour and style, never metrics, so the highlighted swap cannot shift layout. */
@layer design {
  .code-block {
    /* Keep long preformatted lines from triggering mobile text inflation. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    position: relative;
    --code-font: var(--font-code);
    --code-line-height: 22px;
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 100%;
    /* No margin of its own: the surrounding flow spaces it like any block (the article gap above and below). */
    overflow: hidden;
    border: 1px solid var(--border-default);
    border-radius: var(--radius);
    background: var(--code-surface);
    color: var(--code-text);
  }
  /* Heading: the title or language on the left, aligned with the code; Copy and Download on the right, one dense size,
   spaced by the same 2px as the row's inset so both controls sit evenly in the row. */
  .code-block-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    min-height: var(--control-xs);
    padding: 2px 2px 2px var(--space-4);
    border-bottom: 1px solid var(--border-default);
    color: var(--text-secondary);
    font: 600 12px/16px var(--font-ui);
  }
  .code-block-language {
    flex: none;
  }
  .code-block-title {
    min-width: 0;
    color: var(--code-text);
    font: 400 13px/16px var(--code-font);
  }
  .code-block-actions {
    display: flex;
    flex: none;
    align-items: center;
    gap: 2px;
    margin-inline-start: auto;
  }
  .code-block-actions > .btn {
    flex: none;
  }
  .code-block .code-block-body {
    flex: 1 1 auto;
    min-height: 0;
    max-width: 100%;
    margin: 0;
    padding: var(--space-3) 0;
    overflow: auto;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font-family: var(--code-font);
    font-size: 14px;
    font-weight: 400;
    line-height: var(--code-line-height);
    white-space: pre;
    overflow-wrap: normal;
    tab-size: 2;
  }
  .code-block .code-block-body:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: -2px;
  }
  .code-block .code-block-code {
    display: block;
    min-width: max-content;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    white-space: inherit;
    overflow-wrap: normal;
  }
  .code-block .code-line {
    display: block;
    min-height: var(--code-line-height);
    padding-inline: var(--space-4);
  }
  .code-block .code-line[data-highlighted] {
    background: var(--code-line-highlight);
    box-shadow: inset 3px 0 0 var(--code-keyword);
  }
  /* Line numbers are generated content: never selected, copied or read as code. */
  .code-block-body[data-line-numbers] .code-line {
    padding-inline-start: 0;
  }
  .code-block-body[data-line-numbers] .code-line::before {
    content: attr(data-line);
    position: sticky;
    inset-inline-start: 0;
    display: inline-block;
    box-sizing: content-box;
    width: calc(var(--code-line-digits, 2) * 1ch);
    margin-inline-end: var(--space-3);
    padding-inline: var(--space-3);
    background: var(--code-surface);
    box-shadow: inset -1px 0 0 var(--border-default);
    color: var(--code-comment);
    font-variant-numeric: tabular-nums;
    text-align: end;
    user-select: none;
    -webkit-user-select: none;
  }
  .code-block-body[data-line-numbers] .code-line[data-highlighted]::before {
    background: var(--code-line-highlight);
    box-shadow:
      inset 3px 0 0 var(--code-keyword),
      inset -1px 0 0 var(--border-default);
  }
  .code-block-body[data-line-numbers] .code-line[data-highlighted] {
    box-shadow: none;
  }

  /* Wrap: long lines break inside the block instead of scrolling sideways. Wrapped rows hang under the first row, so a
     line number stays beside the start of its line. */
  .code-block[data-wrap] .code-block-body {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
  .code-block[data-wrap] .code-block-code {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .code-block[data-wrap] .code-block-body[data-line-numbers] .code-line {
    position: relative;
    padding-inline-start: calc(var(--code-line-digits, 2) * 1ch + var(--space-3) * 3);
  }
  /* The gutter spans every visual row of a wrapped line, so its surface, divider and highlight bar stay continuous;
     the number sits on the first row because the text starts at the top. */
  .code-block[data-wrap] .code-block-body[data-line-numbers] .code-line::before {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    margin-inline-end: 0;
  }

  /* highlight.js scopes mapped to the semantic syntax tokens. `.code-syntax` lets another code surface (the document editor) reuse the mapping. */
  :is(.code-block, .code-syntax) :is(.hljs-comment, .hljs-quote) {
    color: var(--code-comment);
    font-style: italic;
  }
  :is(.code-block, .code-syntax) :is(.hljs-keyword, .hljs-doctag, .hljs-selector-tag, .hljs-name, .hljs-section) {
    color: var(--code-keyword);
  }
  :is(.code-block, .code-syntax) :is(.hljs-string, .hljs-regexp, .hljs-symbol, .hljs-char.escape_, .hljs-code) {
    color: var(--code-string);
  }
  :is(.code-block, .code-syntax) :is(.hljs-number, .hljs-literal) {
    color: var(--code-number);
  }
  :is(.code-block, .code-syntax) :is(.hljs-built_in, .hljs-title, .hljs-title.function_, .hljs-link) {
    color: var(--code-function);
  }
  :is(.code-block, .code-syntax)
    :is(
      .hljs-title.class_,
      .hljs-type,
      .hljs-attr,
      .hljs-attribute,
      .hljs-property,
      .hljs-variable,
      .hljs-template-variable,
      .hljs-selector-id,
      .hljs-selector-class,
      .hljs-selector-attr,
      .hljs-selector-pseudo
    ) {
    color: var(--code-namespace);
  }
  :is(.code-block, .code-syntax) .hljs-variable.language_ {
    color: var(--code-keyword);
  }
  :is(.code-block, .code-syntax) .hljs-variable.constant_ {
    color: var(--code-number);
  }
  :is(.code-block, .code-syntax) :is(.hljs-operator, .hljs-bullet) {
    color: var(--code-operator);
  }
  :is(.code-block, .code-syntax) :is(.hljs-meta, .hljs-tag, .hljs-meta .hljs-keyword) {
    color: var(--code-meta);
  }
  :is(.code-block, .code-syntax) .hljs-meta .hljs-string {
    color: var(--code-string);
  }
  :is(.code-block, .code-syntax) .hljs-subst {
    color: var(--code-text);
  }
  :is(.code-block, .code-syntax) .hljs-emphasis {
    font-style: italic;
  }
  :is(.code-block, .code-syntax) .hljs-strong {
    font-weight: 600;
  }
}