@scope (code-ui) {
  :where(:scope) {
    /* ── Layout ── */
    --code-px:          var(--a-space-3);
    --code-py:          var(--a-space-2);
    --code-radius:      var(--a-radius-md);
    --code-radius-sm:   var(--a-radius-sm);
    --code-copy-px:     var(--a-space-1);
    --code-copy-py:     var(--a-space-0-5);
    --code-lint-marker-w: 3px; /* Vertical lint-marker rule; intrinsic measurement; no --a-space-* equivalent at this width. */

    /* ── Colors ── */
    --code-bg:          var(--a-bg);
    --code-fg:          var(--a-fg);
    --code-border:      var(--a-border-subtle);
    --code-header-bg:   var(--a-bg-scrim);
    --code-header-fg:   var(--a-fg-muted);
    --code-copy-hover-bg: var(--a-bg-muted);
    --code-copy-hover-fg: var(--a-fg);

    /* ── Typography ── */
    --code-font:        var(--a-font-family-code);
    --code-font-size:   var(--a-ui-sm);
    --code-header-font: var(--a-ui-sm);

    /* ── Transition ── */
    --code-duration:    var(--a-duration-fast);
    --code-easing:      var(--a-easing);

    /* ── Editor chrome (CodeMirror 6) ──
       Active only when `[language]` triggers the CM mount. Still safe
       to emit in read-only mode; unused until `.cm-editor` is in the
       DOM. See docs/specs/code-editor.md §6. */
    --code-gutter-bg:        var(--a-bg-subtle);
    --code-gutter-fg:        var(--a-fg-muted);
    /* Transparency-mixing in oklab — Safari < 18 has an OKLCH bug where
       the transparent operand's hue resolves to 0, red-shifting the mix.
       oklab is hue-agnostic and visually identical in fixed engines. */
    --code-active-line-bg:   color-mix(in oklab, var(--a-accent-muted) 40%, transparent);
    --code-selection-bg:     color-mix(in oklab, var(--a-accent-muted) 60%, transparent);
    --code-selection-match:  color-mix(in oklab, var(--a-accent-muted) 30%, transparent);
    --code-cursor:           var(--a-accent-strong);
    --code-focus-ring:       var(--a-focus-ring);

    /* ── Syntax highlight tokens ──
       Map Lezer/CodeMirror highlight tag names to AdiaUI semantic
       tokens. Overridable per-instance by setting `--code-tok-*` on
       any ancestor. See docs/specs/code-editor.md §6.3 for the tag →
       class → role map. */
    --code-tok-comment:      var(--a-fg-subtle);
    --code-tok-keyword:      var(--a-accent-strong);
    --code-tok-string:       var(--a-success-strong);
    --code-tok-number:       var(--a-info-strong);
    --code-tok-boolean:      var(--a-info-strong);
    --code-tok-operator:     var(--a-fg);
    --code-tok-punctuation:  var(--a-fg-muted);
    --code-tok-function:     var(--a-brand-strong);
    --code-tok-variable:     var(--a-fg);
    --code-tok-type:         var(--a-warning-strong);
    --code-tok-property:     var(--a-fg);
    --code-tok-tag:          var(--a-accent-strong);
    --code-tok-attribute:    var(--a-warning-strong);
    --code-tok-url:          var(--a-info-strong);
    --code-tok-invalid:      var(--a-danger-strong);

    /* ── Lint markers (Phase 3 — editable JSON) ──
       `@codemirror/lint` paints gutter markers + diagnostic tooltips
       + inline underlines. Only fires in editable mode with a linter
       attached; read-only instances never see these selectors. */
    --code-lint-gutter-bg:   var(--a-bg-subtle);
    --code-lint-error:       var(--a-danger-strong);
    --code-lint-warning:     var(--a-warning-strong);
    --code-lint-info:        var(--a-info-strong);
    --code-lint-tooltip-bg:  var(--a-bg-strong);  /* §230-bundle (v0.5.9): elevated panel surface. Was orphaned --a-surface-floating. */
    --code-lint-tooltip-fg:  var(--a-fg);
    --code-lint-tooltip-border: var(--a-border-subtle);
  }

  /* ── Block (default) ── */
  :scope {
    box-sizing: border-box;
    display: block;
    border: 1px solid var(--code-border);
    border-radius: var(--code-radius);
    overflow: hidden;
    background: var(--code-bg);
    color: var(--code-fg);
    font-family: var(--code-font);
    font-size: var(--code-font-size);
  }

  /* Header — chrome band above the code block */
  & > header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    min-height: var(--a-chrome-pane-header-height);
    padding: var(--code-py) var(--code-px);
    background: var(--code-header-bg);
    border-bottom: 1px solid var(--code-border);
    font-size: var(--code-header-font);
    color: var(--code-header-fg);
  }

  & > header [slot="label"] {
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  /* Copy button — ghost style */
  & > header [slot="copy"] {
    all: unset;
    cursor: pointer;
    font-size: var(--code-header-font);
    color: var(--code-header-fg);
    padding: var(--code-copy-py) var(--code-copy-px);
    border-radius: var(--code-radius-sm);
    transition:
      background var(--code-duration) var(--code-easing),
      color var(--code-duration) var(--code-easing);
  }
  & > header [slot="copy"]:hover {
    background: var(--code-copy-hover-bg);
    color: var(--code-copy-hover-fg);
  }

  /* Pre > Code — reset any ambient page styling (margins, borders,
     radii, backgrounds) so the <code-ui> chrome is the single source
     of visual framing. */
  & > pre {
    margin: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    padding: var(--code-py) var(--code-px);
    overflow-x: auto;
    font-family: var(--code-font);
    font-size: var(--code-font-size);
    line-height: 1.5;
    scrollbar-width: none;
  }
  & > pre::-webkit-scrollbar {
    display: none;
  }

  & > pre > code {
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
  }

  /* ── Diff line states (static path) ──
     Active when the block uses `language="diff"` (auto-parse +/- prefix)
     or carries `data-line-states="..."` (explicit per-line). Each line is
     a `[data-line-state]` row whose bg picks up the state token. The
     CodeMirror path doesn't use these markers; line decorations there go
     through CM extensions instead. */
  & > pre > code[data-line-state-mode] {
    display: block;
  }
  & > pre > code[data-line-state-mode] > [data-line-state] {
    display: grid;
    grid-template-columns: 1fr;
    /* Bleed the row tint to the pre's padding edges so it reads as a
       full-width line, not a gap-margined pill. */
    margin-inline: calc(-1 * var(--code-px));
    padding-inline: var(--code-px);
  }
  & > pre > code[data-line-numbers] > [data-line-state] {
    grid-template-columns: auto 1fr;
    column-gap: var(--a-space-3);
  }
  & > pre > code[data-line-state-mode] [data-line-num] {
    color: var(--a-fg-subtle);
    text-align: end;
    user-select: none;
    min-width: 1.5ch;
  }
  & > pre > code[data-line-state-mode] [data-line-body] {
    white-space: pre;
  }
  /* Empty lines still need height so the diff column counts line up. */
  & > pre > code[data-line-state-mode] [data-line-body]:empty::before {
    content: " ";
  }
  & > pre > code [data-line-state="added"] {
    background: var(--a-success-muted);
  }
  & > pre > code [data-line-state="removed"] {
    background: var(--a-danger-muted);
  }

  /* Footer — optional chrome band below the code block
     (line counts, byte size, language family, etc.) */
  & > footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    min-height: var(--a-chrome-pane-footer-height);
    padding: var(--code-py) var(--code-px);
    background: var(--code-header-bg);
    border-top: 1px solid var(--code-border);
    font-size: var(--code-header-font);
    color: var(--code-header-fg);
  }

  /* ── Inline ── */
  :scope[inline] {
    display: inline;
    padding: 0.1em 0.4em;
    background: var(--code-bg);
    border: none;
    border-radius: var(--code-radius-sm);
    font-family: var(--code-font);
    font-size: 0.9em;
    overflow: visible;
  }

  /* ── Bare mode — no chrome ──
     Strips border, background, radius, and padding. Header is hidden
     via #stampBlock (it's never added in bare). Used by the A2UI Editor
     and any pane-level context where <code-ui> is framed by a parent
     surface and should not carry its own. Height flows from the parent
     container, so CM's internal scroll handles overflow. */
  :scope[bare] {
    border: none;
    border-radius: 0;
    background: transparent;
    overflow: visible;
    height: 100%;
  }
  :scope[bare] > pre {
    padding: 0;
    height: 100%;
  }
  :scope[bare] > [data-cm-mount] {
    height: 100%;
  }
  :scope[bare] .cm-editor {
    height: 100%;
  }
  :scope[bare] .cm-scroller {
    padding: 0;
  }
  :scope[bare] .cm-gutters {
    background: transparent;
  }

  /* ── Form states (editable-only surfaces) ──
     `[disabled]` — visually muted, pointer-events disabled so the user
     can't click into the editor. CM's readonly compartment handles the
     actual edit-blocking; these rules are the visual cue.
     `[readonly]` — muted but clickable (user can still select + copy).
     `[aria-invalid="true"]` — error ring for form validation failures. */
  :scope[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
  }
  :scope[disabled] .cm-editor {
    pointer-events: none;
  }
  :scope[readonly] .cm-editor {
    background: var(--a-bg-subtle);
  }
  :scope[aria-invalid="true"] {
    border-color: var(--a-danger-strong);
  }
  :scope[aria-invalid="true"] .cm-focused {
    outline: 2px solid var(--a-danger-strong);
    outline-offset: -1px;
  }

  /* ── CodeMirror mount ──
     `<code-ui>` inserts `<div data-cm-mount>` in place of `<pre><code>`
     when `[language]` triggers the CM lazy-load. Styles below apply to
     the CodeMirror DOM that CM renders inside that mount.

     Selector discipline: `.cm-*` classes are CodeMirror's; `.tok-*`
     classes come from our `adiaHighlightStyle` (see core/_cm-theme.js).
     CM's CSS-in-JS stylesheets load first + at lower specificity, so
     these rules override without !important. */

  & > [data-cm-mount] {
    display: block;
    overflow: hidden;
  }

  :scope .cm-editor {
    background: transparent;
    color: var(--code-fg);
    font-family: var(--code-font);
    font-size: var(--code-font-size);
    line-height: 1.5;
  }

  :scope .cm-scroller {
    font-family: inherit;
    line-height: inherit;
    /* No padding — the gutter band ([data-cm-mount] > .cm-gutters has its
       own --code-gutter-bg) reads as the chrome it is when pinned to the
       left edge, and the active-line highlight and selection block get
       full bleed. The header / footer bands frame the editor; this content
       region should not double-inset. */
    padding: 0;
  }

  :scope .cm-content {
    padding: var(--code-py) var(--code-px);
    caret-color: var(--code-cursor);
  }

  :scope .cm-editor.cm-focused {
    outline: 2px solid var(--code-focus-ring);
    outline-offset: -2px;
  }

  :scope .cm-gutters {
    background: var(--code-gutter-bg);
    color: var(--code-gutter-fg);
    border-right: 1px solid var(--code-border);
  }

  :scope .cm-activeLine {
    background: var(--code-active-line-bg);
  }
  :scope .cm-activeLineGutter {
    background: var(--code-active-line-bg);
    color: var(--code-fg);
  }

  :scope .cm-selectionBackground,
  :scope ::selection {
    background: var(--code-selection-bg);
  }

  :scope .cm-selectionMatch {
    background: var(--code-selection-match);
  }

  :scope .cm-cursor {
    border-left-color: var(--code-cursor);
  }

  /* Syntax highlight — one rule per token role (see core/_cm-theme.js) */
  :scope .tok-comment     { color: var(--code-tok-comment); font-style: italic; }
  :scope .tok-keyword     { color: var(--code-tok-keyword); font-weight: 500; }
  :scope .tok-string      { color: var(--code-tok-string); }
  :scope .tok-number      { color: var(--code-tok-number); }
  :scope .tok-boolean     { color: var(--code-tok-boolean); }
  :scope .tok-operator    { color: var(--code-tok-operator); }
  :scope .tok-punctuation { color: var(--code-tok-punctuation); }
  :scope .tok-function    { color: var(--code-tok-function); }
  :scope .tok-variable    { color: var(--code-tok-variable); }
  :scope .tok-type        { color: var(--code-tok-type); font-weight: 500; }
  :scope .tok-property    { color: var(--code-tok-property); }
  :scope .tok-tag         { color: var(--code-tok-tag); }
  :scope .tok-attribute   { color: var(--code-tok-attribute); }
  :scope .tok-url         { color: var(--code-tok-url); text-decoration: underline; }
  :scope .tok-invalid     { color: var(--code-tok-invalid); text-decoration: wavy underline; }

  /* ── Lint gutter + diagnostics ──
     Styles the `@codemirror/lint` markers in the gutter, the inline
     wavy underline on the diagnostic range, and the tooltip panel. */
  :scope .cm-gutter-lint {
    background: var(--code-lint-gutter-bg);
    width: 1em;
  }
  :scope .cm-lint-marker {
    width: 0.7em;
    height: 0.7em;
    margin: 0.15em 0.15em;
  }
  :scope .cm-lint-marker-error   { color: var(--code-lint-error); }
  :scope .cm-lint-marker-warning { color: var(--code-lint-warning); }
  :scope .cm-lint-marker-info    { color: var(--code-lint-info); }

  :scope .cm-lintRange-error   { background: none; text-decoration: wavy underline var(--code-lint-error); }
  :scope .cm-lintRange-warning { background: none; text-decoration: wavy underline var(--code-lint-warning); }
  :scope .cm-lintRange-info    { background: none; text-decoration: wavy underline var(--code-lint-info); }

  :scope .cm-tooltip.cm-tooltip-lint {
    background: var(--code-lint-tooltip-bg);
    color: var(--code-lint-tooltip-fg);
    border: 1px solid var(--code-lint-tooltip-border);
    border-radius: var(--code-radius-sm);
    padding: var(--a-space-1) var(--a-space-2);
    font-size: var(--a-ui-sm);
    font-family: var(--a-font-family);
    max-inline-size: 40ch;
  }
  :scope .cm-diagnostic {
    padding: 0;
    border-inline-start: var(--code-lint-marker-w) solid transparent;
    padding-inline-start: var(--a-space-2);
  }
  :scope .cm-diagnostic-error   { border-inline-start-color: var(--code-lint-error); }
  :scope .cm-diagnostic-warning { border-inline-start-color: var(--code-lint-warning); }
  :scope .cm-diagnostic-info    { border-inline-start-color: var(--code-lint-info); }
  :scope .cm-diagnosticText { white-space: pre-wrap; }
}
