/*
 * RichContentCode — one visual owner for code authored in TinyMCE.
 *
 * Transport matrix:
 * - read path: .wysiwyg-viewer, using the active UI semantic tokens;
 * - TinyMCE edit/readonly iframe: body.cw-editor-canvas, using the variable
 *   mirrors declared by editor_styles.css because iframe documents cannot
 *   inherit parent-page CSS variables.
 *
 * This stylesheet is loaded after Prism on both paths. Its scoped selectors
 * intentionally outrank Prism's stock light theme without !important, so
 * author inline colors/backgrounds still win when explicitly chosen.
 */

.wysiwyg-viewer {
  --rich-code-bg: color-mix(in srgb, var(--ui-surface-muted) 88%, var(--ui-surface-base));
  --rich-code-border: var(--ui-border-strong);
  --rich-code-text: var(--ui-text-primary);
  --rich-code-comment: color-mix(in srgb, var(--ui-text-muted) 88%, var(--ui-text-primary));
  --rich-code-punctuation: var(--ui-text-secondary);
  /* Blend light-theme role colors toward primary ink so syntax remains AA on
     the pale code surface; the dark override below uses the bright ramps. */
  --rich-code-property: color-mix(in srgb, var(--ui-color-danger-strong) 82%, var(--ui-text-primary));
  --rich-code-string: color-mix(in srgb, var(--ui-color-success-strong) 70%, var(--ui-text-primary));
  --rich-code-operator: color-mix(in srgb, var(--ui-color-warning-strong) 65%, var(--ui-text-primary));
  --rich-code-keyword: color-mix(in srgb, var(--ui-color-action-text) 82%, var(--ui-text-primary));
  --rich-code-function: var(--rich-code-property);
  --rich-code-variable: var(--rich-code-operator);
  --rich-code-inline-bg: color-mix(in srgb, var(--ui-text-primary) 7%, transparent);
  --rich-code-selection-bg: color-mix(in srgb, var(--ui-color-action) 24%, transparent);
  --rich-code-shadow: inset 0 1px 0 color-mix(in srgb, var(--ui-text-primary) 5%, transparent);
}

[data-bs-theme="dark"] .wysiwyg-viewer {
  --rich-code-bg: var(--ui-primitive-night-950);
  --rich-code-border: var(--ui-primitive-night-600);
  --rich-code-text: var(--ui-primitive-night-100);
  --rich-code-comment: var(--ui-primitive-night-300);
  --rich-code-punctuation: var(--ui-primitive-night-200);
  --rich-code-property: var(--ui-primitive-danger-400);
  --rich-code-string: var(--ui-primitive-success-400);
  --rich-code-operator: var(--ui-primitive-warning-400);
  --rich-code-keyword: var(--ui-primitive-brand-300);
  --rich-code-function: var(--ui-primitive-danger-400);
  --rich-code-variable: var(--ui-primitive-warning-400);
  --rich-code-inline-bg: color-mix(in srgb, var(--ui-primitive-white) 10%, transparent);
  --rich-code-selection-bg: color-mix(in srgb, var(--ui-primitive-brand-300) 32%, transparent);
  --rich-code-shadow: inset 0 1px 0 color-mix(in srgb, var(--ui-primitive-white) 6%, transparent);
}

/* A background may be authored directly on a <pre>, which overrides the
   standard code canvas. In that narrow case Prism must follow the author
   background, not the surrounding page theme. The same contract is mirrored
   in editor_styles.css for the isolated TinyMCE iframe. */
.wysiwyg-viewer [data-rich-bg-tone="light"] {
  --rich-code-bg: color-mix(in srgb, var(--ui-surface-muted) 88%, var(--ui-surface-base));
  --rich-code-border: var(--ui-border-strong);
  --rich-code-text: var(--ui-text-primary);
  --rich-code-comment: color-mix(in srgb, var(--ui-text-muted) 88%, var(--ui-text-primary));
  --rich-code-punctuation: var(--ui-text-secondary);
  --rich-code-property: color-mix(in srgb, var(--ui-color-danger-strong) 82%, var(--ui-text-primary));
  --rich-code-string: color-mix(in srgb, var(--ui-color-success-strong) 70%, var(--ui-text-primary));
  --rich-code-operator: color-mix(in srgb, var(--ui-color-warning-strong) 65%, var(--ui-text-primary));
  --rich-code-keyword: color-mix(in srgb, var(--ui-color-action-text) 82%, var(--ui-text-primary));
  --rich-code-function: var(--rich-code-property);
  --rich-code-variable: var(--rich-code-operator);
}

.wysiwyg-viewer [data-rich-bg-tone="dark"] {
  --rich-code-bg: var(--ui-primitive-night-950);
  --rich-code-border: var(--ui-primitive-night-600);
  --rich-code-text: var(--ui-primitive-night-100);
  --rich-code-comment: var(--ui-primitive-night-300);
  --rich-code-punctuation: var(--ui-primitive-night-200);
  --rich-code-property: var(--ui-primitive-danger-400);
  --rich-code-string: var(--ui-primitive-success-400);
  --rich-code-operator: var(--ui-primitive-warning-400);
  --rich-code-keyword: var(--ui-primitive-brand-300);
  --rich-code-function: var(--ui-primitive-danger-400);
  --rich-code-variable: var(--ui-primitive-warning-400);
}

:is(.wysiwyg-viewer, body.cw-editor-canvas) code,
:is(.wysiwyg-viewer, body.cw-editor-canvas) pre {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

:is(.wysiwyg-viewer, body.cw-editor-canvas) pre {
  max-width: 100%;
  margin: 0.75rem 0;
  padding: 0.875rem 1rem;
  overflow: auto;
  border: 1px solid var(--rich-code-border);
  border-radius: 0.5rem;
  background: var(--rich-code-bg);
  box-shadow: var(--rich-code-shadow);
  color: var(--rich-code-text);
  font-size: 0.875rem;
  line-height: 1.55;
  text-align: left;
  text-shadow: none;
  white-space: pre;
  word-break: normal;
  word-spacing: normal;
  overflow-wrap: normal;
  tab-size: 4;
}

:is(.wysiwyg-viewer, body.cw-editor-canvas) pre code {
  display: inline;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  text-shadow: none;
  white-space: inherit;
}

:is(.wysiwyg-viewer, body.cw-editor-canvas) :not(pre) > code {
  padding: 0.1rem 0.32rem;
  border-radius: 0.25rem;
  background: var(--rich-code-inline-bg);
  color: inherit;
  text-shadow: none;
  white-space: normal;
}

:is(.wysiwyg-viewer, body.cw-editor-canvas) :is(.token.comment, .token.prolog, .token.doctype, .token.cdata) {
  color: var(--rich-code-comment);
}

:is(.wysiwyg-viewer, body.cw-editor-canvas) .token.punctuation {
  color: var(--rich-code-punctuation);
}

:is(.wysiwyg-viewer, body.cw-editor-canvas) :is(
  .token.property,
  .token.tag,
  .token.boolean,
  .token.number,
  .token.constant,
  .token.symbol,
  .token.deleted
) {
  color: var(--rich-code-property);
}

:is(.wysiwyg-viewer, body.cw-editor-canvas) :is(
  .token.selector,
  .token.attr-name,
  .token.string,
  .token.char,
  .token.builtin,
  .token.inserted
) {
  color: var(--rich-code-string);
}

:is(.wysiwyg-viewer, body.cw-editor-canvas) :is(
  .token.operator,
  .token.entity,
  .token.url,
  .language-css .token.string,
  .style .token.string
) {
  background: transparent;
  color: var(--rich-code-operator);
}

:is(.wysiwyg-viewer, body.cw-editor-canvas) :is(.token.atrule, .token.attr-value, .token.keyword) {
  color: var(--rich-code-keyword);
}

:is(.wysiwyg-viewer, body.cw-editor-canvas) :is(.token.function, .token.class-name) {
  color: var(--rich-code-function);
}

:is(.wysiwyg-viewer, body.cw-editor-canvas) :is(.token.regex, .token.important, .token.variable) {
  color: var(--rich-code-variable);
}

:is(.wysiwyg-viewer, body.cw-editor-canvas) pre::selection,
:is(.wysiwyg-viewer, body.cw-editor-canvas) pre *::selection {
  background: var(--rich-code-selection-bg);
  text-shadow: none;
}

/* Preserve readable, low-ink source code when a dark page is printed. */
@media print {
  .wysiwyg-viewer,
  .wysiwyg-viewer [data-rich-bg-tone],
  [data-bs-theme] .wysiwyg-viewer,
  [data-bs-theme] .wysiwyg-viewer [data-rich-bg-tone] {
    --rich-code-bg: var(--ui-primitive-white);
    --rich-code-border: var(--ui-primitive-black);
    --rich-code-text: var(--ui-primitive-black);
    --rich-code-comment: var(--ui-primitive-black);
    --rich-code-punctuation: var(--ui-primitive-black);
    --rich-code-property: var(--ui-primitive-black);
    --rich-code-string: var(--ui-primitive-black);
    --rich-code-operator: var(--ui-primitive-black);
    --rich-code-keyword: var(--ui-primitive-black);
    --rich-code-function: var(--ui-primitive-black);
    --rich-code-variable: var(--ui-primitive-black);
    --rich-code-inline-bg: transparent;
    --rich-code-shadow: none;
  }

  .wysiwyg-viewer pre {
    overflow: visible;
    white-space: pre-wrap;
  }
}