/* The playground shares the preview server's Material 3 token layer (`serve.css`), so nothing here
   declares a colour of its own: the editor, its file tabs, the run button and the diagnostics list
   are painted from the same `--md-sys-color-*` roles the rest of the chrome uses — which is also
   what makes them follow a served catalog's palette. The only literals left are the CodeMirror
   syntax hues at the bottom, which are a code theme rather than product chrome. */
.cp-pg { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.cp-pg-bar { display: flex; align-items: center; gap: 10px; }
.cp-pg-modelabel { font-weight: 500; }
/* An M3 outlined select. */
.cp-pg-mode { padding: 8px 12px; border-radius: var(--md-sys-shape-corner-extra-small);
  border: 1px solid var(--md-sys-color-outline); background: var(--md-sys-color-surface-container-low);
  color: var(--md-sys-color-on-surface); font: inherit; }
.cp-pg-run { margin-left: auto; }
.cp-pg-files { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* File tabs are M3 filter chips: outlined, tonal when current. */
.cp-pg-file { display: inline-flex; align-items: center; min-height: 32px; padding: 6px 16px;
  border-radius: var(--md-sys-shape-corner-small); border: 1px solid var(--md-sys-color-outline-variant);
  background: transparent; color: var(--md-sys-color-on-surface-variant); font: inherit;
  font-size: var(--md-sys-typescale-label-large-size); font-weight: 500; cursor: pointer; }
.cp-pg-file:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); }
.cp-pg-file[aria-current="true"] { background: var(--md-sys-color-secondary-container);
  border-color: transparent; color: var(--md-sys-color-on-secondary-container); }
/* "Add file" is the dashed-outline variant — an action, not a selection. */
.cp-pg-filebtn { display: inline-flex; align-items: center; min-height: 32px; padding: 6px 16px;
  border-radius: var(--md-sys-shape-corner-small); border: 1px dashed var(--md-sys-color-outline);
  background: transparent; color: var(--md-sys-color-primary); font: inherit;
  font-size: var(--md-sys-typescale-label-large-size); font-weight: 500; cursor: pointer; }
.cp-pg-filebtn:hover { background: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); }
/* The editor is an M3 filled text field: a container-role fill, no outline. */
.cp-pg-source { width: 100%; min-height: 260px; box-sizing: border-box; padding: 14px 16px;
  border-radius: var(--md-sys-shape-corner-medium); border: 0;
  background: var(--md-sys-color-surface-container-low); color: var(--md-sys-color-on-surface);
  font-family: var(--md-sys-typescale-mono-font); font-size: 13px;
  line-height: 1.5; tab-size: 2; resize: vertical; }
.cp-pg-status { font-size: var(--md-sys-typescale-body-medium-size);
  color: var(--md-sys-color-on-surface-variant); }
.cp-pg-status.cp-doc-error { color: var(--md-sys-color-error); }
/* A handoff that named a catalog this host cannot compile against. Reads as a notice rather than a
   compiler error — nothing has failed yet, and the editor below still works — so it takes the M3
   error-container pair at notice weight instead of the flat error colour a diagnostic uses. */
.cp-pg-warn { padding: 12px 16px; border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }
.cp-pg-diags { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column;
  gap: 6px; }
/* `pre-wrap`, because a compiler message is not one line. K2 renders an overload failure as a
   head line, one block per candidate and a `^^^^` caret excerpt; collapsing that whitespace ran
   the candidates together into an unreadable paragraph and misaligned the caret. Long lines still
   wrap, so the column never scrolls sideways. */
.cp-pg-diag { font-family: var(--md-sys-typescale-mono-font); white-space: pre-wrap;
  font-size: 12.5px; padding: 10px 14px; border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-surface-container-high); }
/* A compiler error takes the M3 error container pair; a warning keeps its literal amber, which —
   like the trust badges — must mean the same thing under every catalog palette. */
.cp-pg-error { background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container); }
.cp-pg-warning { background: light-dark(#ffdfb0, #4a3000); color: light-dark(#573100, #ffd8a3); }
/* Compiler locations stay visible in the editor while their full, accessible summary remains in
   the list below it. A line tint makes the location scannable; the widget carries the actual
   message immediately beneath the offending line. */
.cp-pg-line-error { background: color-mix(in srgb, var(--md-sys-color-error-container) 55%, transparent); }
.cp-pg-line-warning { background: light-dark(#fff4df, #362600); }
.cp-pg-inline-diag { padding: 4px 12px; border-left: 3px solid currentcolor; white-space: pre-wrap;
  font-family: var(--md-sys-typescale-mono-font); font-size: 12.5px; line-height: 1.45; }
.cp-pg-inline-error { background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container); }
.cp-pg-inline-warning { background: light-dark(#ffdfb0, #4a3000);
  color: light-dark(#573100, #ffd8a3); }
.cp-pg-inline-info { background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface); }
.cp-pg-range-error { text-decoration: underline wavy var(--md-sys-color-error) 1.5px;
  text-underline-offset: 2px; }
.cp-pg-range-warning { text-decoration: underline wavy light-dark(#8a4f00, #ffb95c) 1.5px;
  text-underline-offset: 2px; }
.cp-pg-result { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.cp-pg-image { max-width: 100%; border-radius: var(--md-sys-shape-corner-medium); border: 0;
  background: var(--md-sys-color-surface-container-lowest);
  box-shadow: var(--md-sys-elevation-level1); }
/* CodeMirror — sized and themed to match the textarea it replaces, so the page looks the same
   whether the vendored bundle loaded or not. Its chrome now comes from the same M3 roles as that
   textarea; only the token hues below stay literal (a code theme, not product chrome), and the
   dark half of those is ours because CodeMirror ships a light theme only. */
.cp-pg .CodeMirror { height: auto; min-height: 260px;
  border-radius: var(--md-sys-shape-corner-medium); border: 0;
  background: var(--md-sys-color-surface-container-low); color: var(--md-sys-color-on-surface);
  font-family: var(--md-sys-typescale-mono-font); font-size: 13px;
  line-height: 1.5; }
.cp-pg .CodeMirror-scroll { min-height: 260px; }
.cp-pg .CodeMirror-gutters { background: transparent;
  border-right: 1px solid var(--md-sys-color-outline-variant); }
.cp-pg .CodeMirror-linenumber { color: var(--md-sys-color-outline); }
/* Focus ring parity with the other controls — CodeMirror paints its own box, so the outline has
   to go on the wrapper rather than the (hidden) textarea. */
.cp-pg .CodeMirror-focused { outline: 3px solid var(--md-sys-color-secondary); outline-offset: 2px; }
.cp-pg .CodeMirror-cursor { border-left-color: var(--md-sys-color-on-surface); }
.cp-pg .CodeMirror-selected { background: var(--md-sys-color-secondary-container); }

/* The syntax hues, as one `light-dark()` pair per token: the light half is CodeMirror's own
   `cm-s-default` value (restated because the vendored sheet scopes it to `.cm-s-default`, which
   this wrapper outranks anyway), the dark half is ours — CodeMirror ships a light theme only.
   Written as pairs rather than as a `prefers-color-scheme` override so the editor follows the
   page's resolved `color-scheme`, including when the page-theme setting pins it against the OS. */
.cp-pg .cm-keyword { color: light-dark(#770088, #c792ea); }
.cp-pg .cm-def { color: light-dark(#0000ff, #82aaff); }
.cp-pg .cm-variable-3, .cp-pg .cm-type { color: light-dark(#008855, #82aaff); }
.cp-pg .cm-string { color: light-dark(#aa1111, #c3e88d); }
.cp-pg .cm-string-2 { color: light-dark(#ff5500, #c3e88d); }
.cp-pg .cm-number { color: light-dark(#116644, #f78c6c); }
.cp-pg .cm-comment { color: light-dark(#aa5500, #7d8799); }
.cp-pg .cm-meta { color: light-dark(#555555, #ffcb6b); }
.cp-pg .cm-atom { color: light-dark(#221199, #ffcb6b); }
/* `operator` / `punctuation` have no default hue at all (they inherit the editor's text colour), so
   the light half is `currentcolor` — which on `color` itself resolves to the inherited value —
   rather than an invented hue. */
.cp-pg .cm-operator, .cp-pg .cm-punctuation { color: light-dark(currentcolor, #89ddff); }