/* The old .r32-default-example card is intentionally not rendered. The shared
   example registry writes directly to each tool's real controls.
   The editor surface is dark on Release 32 pages, so the site's light-theme
   highlight tokens must be overridden or the prefilled example appears blank. */
.tool-workbench {
  /* Release 32 modules historically used several names for the same site
     tokens. Keep those aliases theme-aware so a missing fallback never turns a
     dark page into a bright, unreadable island. */
  --panel: var(--surface);
  --panel-strong: var(--surface);
  --surface-strong: var(--surface);
  --line: var(--border);
  --border-color: var(--border);
  --card-bg: var(--surface);
  --input-bg: var(--surface);
  --input-background: var(--surface);
  --text-color: var(--text);
  --muted-text: var(--muted);
  --primary-color: var(--primary);
  --error-text: var(--danger);
  --success-text: var(--success);
  --surface-text: var(--text);
  --tool-surface: var(--surface);
  --tool-input: var(--surface-2);
  --tool-text: var(--text);
  --tool-muted: var(--muted);
  --tool-border: var(--border);
  --tool-accent: var(--primary);
  --tool-status: color-mix(in srgb, var(--primary) 8%, var(--surface));
}

#toolWorkbench :is(a, button, input:not([type="hidden"]), select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.tool-workbench .code-highlight-layer {
  color: #e5edf8;
}

.tool-workbench textarea.code-textarea {
  background: transparent !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

.tool-workbench .code-highlight-code .hljs-comment,
.tool-workbench .code-highlight-code .hljs-quote {
  color: #8b949e;
}

.tool-workbench .code-highlight-code .hljs-keyword,
.tool-workbench .code-highlight-code .hljs-selector-tag,
.tool-workbench .code-highlight-code .hljs-subst {
  color: #ff7b72;
}

.tool-workbench .code-highlight-code .hljs-literal,
.tool-workbench .code-highlight-code .hljs-number,
.tool-workbench .code-highlight-code .hljs-tag .hljs-attr,
.tool-workbench .code-highlight-code .hljs-template-variable,
.tool-workbench .code-highlight-code .hljs-variable {
  color: #79c0ff;
}

.tool-workbench .code-highlight-code .hljs-string,
.tool-workbench .code-highlight-code .hljs-doctag,
.tool-workbench .code-highlight-code .hljs-regexp,
.tool-workbench .code-highlight-code .hljs-title.class_ {
  color: #a5d6ff;
}

.tool-workbench .code-highlight-code .hljs-title,
.tool-workbench .code-highlight-code .hljs-title.function_,
.tool-workbench .code-highlight-code .hljs-name,
.tool-workbench .code-highlight-code .hljs-section,
.tool-workbench .code-highlight-code .hljs-selector-id {
  color: #d2a8ff;
}

.tool-workbench .code-highlight-code .hljs-attr,
.tool-workbench .code-highlight-code .hljs-attribute,
.tool-workbench .code-highlight-code .hljs-built_in,
.tool-workbench .code-highlight-code .hljs-symbol,
.tool-workbench .code-highlight-code .hljs-selector-class {
  color: #ffa657;
}

.tool-workbench .code-highlight-code .hljs-meta,
.tool-workbench .code-highlight-code .hljs-operator,
.tool-workbench .code-highlight-code .hljs-punctuation {
  color: #8b949e;
}

.tool-workbench .code-highlight-code .hljs-deletion { color: #ffa198; }
.tool-workbench .code-highlight-code .hljs-addition { color: #7ee787; }

@media (max-width: 760px) {
  #toolWorkbench :is(
    button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    select
  ) {
    min-height: 44px;
  }

  #toolWorkbench :is(
    button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"]
  ) {
    min-width: 44px;
  }
}