/* Interactive HAPTIC playground embeds for the docs sites.
 *
 * A ".pg-embed" block renders as a facade (title + the shown config + a "Run
 * live" button); clicking swaps in an <iframe> of the playground in ?embed=1
 * mode, lazy-loaded so the wasm only downloads when the reader engages. Paired
 * with playground-embed.js. Styling stays theme-aware (mkdocs-material
 * light/dark) via var(--md-*) tokens with sensible fallbacks. */

.pg-embed {
  border: 1px solid var(--md-default-fg-color--lightest, #e0e0e0);
  border-radius: 8px;
  margin: 1.2em 0;
  overflow: hidden;
  background: var(--md-code-bg-color, #f5f5f5);
}
.pg-embed-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.7rem;
  border-bottom: 1px solid var(--md-default-fg-color--lightest, #e0e0e0);
  background: var(--md-default-bg-color, #fff);
  font-size: 0.8rem;
}
.pg-embed-title { font-weight: 700; color: var(--md-default-fg-color, #111); }
.pg-embed-diff { color: var(--md-accent-fg-color, #e0642e); letter-spacing: 0.05em; font-size: 0.72rem; cursor: help; }
.pg-embed-spacer { flex: 1; }

/* Run / pop-out buttons */
.pg-btn {
  appearance: none;
  cursor: pointer;
  border: 1px solid var(--md-primary-fg-color, #3f6ec6);
  background: var(--md-primary-fg-color, #3f6ec6);
  color: var(--md-primary-bg-color, #fff);
  font: 600 0.76rem/1 var(--md-text-font-family, system-ui);
  padding: 0.4rem 0.7rem;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  text-decoration: none;
}
.pg-btn:hover { filter: brightness(1.08); }
.pg-btn[hidden] { display: none; }  /* beat .pg-btn's display:inline-flex so hiding works */
/* "Load solution" is a peer action to "Run live" (both load a config and run it),
 * so it's a clearly-active secondary button — tinted + bordered, filling on hover —
 * not a faint ghost that reads as disabled. */
.pg-btn.pg-btn-ghost {
  background: color-mix(in srgb, var(--md-primary-fg-color, #3f6ec6) 12%, transparent);
  color: var(--md-primary-fg-color, #3f6ec6);
  border-color: var(--md-primary-fg-color, #3f6ec6);
}
.pg-btn.pg-btn-ghost:hover {
  background: var(--md-primary-fg-color, #3f6ec6);
  color: var(--md-primary-bg-color, #fff);
  filter: none;
}
.pg-btn-play { font-size: 0.7rem; }

/* The shown config code block (mkdocs highlight sits here). */
.pg-embed-code { margin: 0; }
.pg-embed-code > .highlight,
.pg-embed-code > pre { margin: 0 !important; border-radius: 0 !important; }

/* Token classes emitted by the shared Lezer highlighter (highlightToHTML) — the
 * SAME grammar the live editor uses, so the shown config matches the editor by
 * construction. Calm blue directives, teal names, purple template keywords —
 * not mkdocs-material's loud pink. Light values first; the dark (slate) scheme
 * overrides with the editor's terminal palette (index.html --t-*).
 *   sec  HAProxy section      kw   HAProxy directive / bool-null
 *   key  YAML key             tvar tprop  scriggo variable / property
 *   tkw  scriggo keyword      tdelim  {{ }} {% %} delimiters
 *   fn   function / proxy     num tbool  number / scriggo bool
 *   str  string   top operator   cmt comment */
.pg-embed-code .pg-cf-sec { color: #0550ae; font-weight: 700; }
.pg-embed-code .pg-cf-kw  { color: #0550ae; }
.pg-embed-code .pg-cf-fn  { color: #953800; }
.pg-embed-code .pg-cf-num,
.pg-embed-code .pg-cf-tbool { color: #953800; }
.pg-embed-code .pg-cf-str { color: #0a7c42; }
.pg-embed-code .pg-cf-cmt { color: #6e7781; font-style: italic; }
.pg-embed-code .pg-cf-key,
.pg-embed-code .pg-cf-tvar,
.pg-embed-code .pg-cf-tprop { color: #0e7490; }
.pg-embed-code .pg-cf-tkw,
.pg-embed-code .pg-cf-tdelim { color: #8250df; font-weight: 600; }
.pg-embed-code .pg-cf-top { color: #6e7781; }
[data-md-color-scheme="slate"] .pg-embed-code .pg-cf-sec { color: #6cb6ff; }
[data-md-color-scheme="slate"] .pg-embed-code .pg-cf-kw  { color: #6cb6ff; }
[data-md-color-scheme="slate"] .pg-embed-code .pg-cf-fn  { color: #f69d50; }
[data-md-color-scheme="slate"] .pg-embed-code .pg-cf-num,
[data-md-color-scheme="slate"] .pg-embed-code .pg-cf-tbool { color: #f0a868; }
[data-md-color-scheme="slate"] .pg-embed-code .pg-cf-str { color: #8ddb8c; }
[data-md-color-scheme="slate"] .pg-embed-code .pg-cf-cmt { color: #7a879a; }
[data-md-color-scheme="slate"] .pg-embed-code .pg-cf-key,
[data-md-color-scheme="slate"] .pg-embed-code .pg-cf-tvar,
[data-md-color-scheme="slate"] .pg-embed-code .pg-cf-tprop { color: #56d4dd; }
[data-md-color-scheme="slate"] .pg-embed-code .pg-cf-tkw,
[data-md-color-scheme="slate"] .pg-embed-code .pg-cf-tdelim { color: #d2a8ff; }
[data-md-color-scheme="slate"] .pg-embed-code .pg-cf-top { color: #7d8fa6; }

/* Task / challenge callout — one standard style whether it introduces a
 * challenge inside an embed or an "explore this" prompt after a preset embed.
 * Accent left-bar + tint + an uppercase "🎯 Try it" lead so it reads as an
 * invitation, not plain prose. Horizontal padding matches the embed header. */
.pg-task {
  margin: 0; padding: 0.6rem 0.7rem 0.6rem 0.75rem;
  background: color-mix(in srgb, var(--md-accent-fg-color, #e0642e) 8%, var(--md-default-bg-color, #fff));
  border-left: 3px solid var(--md-accent-fg-color, #e0642e);
  border-bottom: 1px solid var(--md-default-fg-color--lightest, #e0e0e0);
  font-size: 0.82rem; line-height: 1.55;
}
.pg-task::before {
  content: "🎯 Try it";
  display: inline-block; margin-right: 0.45rem;
  font-weight: 700; font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--md-accent-fg-color, #e0642e);
}
/* A pg-task placed as the first child of an embed (a challenge intro) has no
 * header divider above it, so round the top to match the embed corners. */
.pg-embed > .pg-task:first-child { border-radius: 8px 8px 0 0; }

/* Collapsed hint / solution (also works if the author uses a raw <details>) */
.pg-embed details.pg-hint,
.pg-embed details.pg-solution {
  margin: 0; border-top: 1px solid var(--md-default-fg-color--lightest, #e0e0e0);
}
.pg-embed details > summary {
  cursor: pointer; padding: 0.45rem 0.8rem; font-size: 0.8rem; font-weight: 600;
  color: var(--md-accent-fg-color, #e0642e); list-style: none;
}
.pg-embed details > summary::before { content: "▸ "; }
.pg-embed details[open] > summary::before { content: "▾ "; }
.pg-embed details.pg-hint > summary::after { content: " (hint)"; font-weight: 400; opacity: 0.7; }

/* Placeholder shown in a preset embed's facade (its config is fetched on Run). */
.pg-embed-placeholder {
  padding: 1.1rem 0.9rem; text-align: center; font-size: 0.82rem;
  color: var(--md-default-fg-color--light, #5a5a5a);
  border-top: 1px solid var(--md-default-fg-color--lightest, #e0e0e0);
}
.pg-ph-play { color: var(--md-primary-fg-color, #3f6ec6); font-weight: 700; margin-right: 0.15rem; }

/* The live iframe (revealed on Run) */
.pg-frame {
  display: block; width: 100%; border: 0;
  background: var(--md-code-bg-color, #0d1117);
}
.pg-embed:not(.pg-running) .pg-frame { display: none; }
.pg-embed.pg-running .pg-embed-code { display: none; }
.pg-embed .pg-loading {
  padding: 1.4rem; text-align: center; font-size: 0.8rem;
  color: var(--md-default-fg-color--light, #666);
}