/* Playground page (docs/playground.md). Colors come from the tokens in
   landing.css. */
.md-content:has(.pg) .md-typeset { max-width: none; }
.md-typeset .pg {
  display: grid; gap: 1.2rem; margin: 1.6rem 0 2rem;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
}
.md-typeset .pg label { display: block; margin-bottom: 0.4rem; color: var(--cream); font-weight: 600; font-size: 0.75rem; }
.md-typeset .pg textarea, .md-typeset .pg input, .md-typeset .pg select {
  width: 100%; font: 0.7rem/1.6 var(--md-code-font-family); font-variant-ligatures: none;
  color: var(--cream); background: var(--ink-4);
  border: 1px solid var(--ink-3); border-radius: 0.5rem; padding: 0.6rem 0.75rem;
}
.md-typeset .pg textarea { min-height: 22rem; resize: vertical; }
.md-typeset .pg :is(textarea, input, select):focus-visible { outline: 2px solid var(--brand); outline-offset: -1px; }
.pg__help, .pg__muted { color: var(--dim); font-size: 0.68rem; }
.md-typeset .pg__help { margin: 0.4rem 0 0; }
.pg__line { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0.5rem; }
.pg__presets { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.75rem 0 1rem; }
.md-typeset .pg__presets button {
  font: 0.62rem var(--md-code-font-family); cursor: pointer; color: var(--mist);
  padding: 0.3rem 0.6rem; border-radius: 0.4rem; border: 1px solid var(--ink-3); background: var(--ink-2);
  transition: border-color 0.15s, color 0.15s;
}
.md-typeset .pg__presets button:hover { border-color: var(--brand); color: var(--cream); }
.pg__result {
  --accent: var(--ink-3);
  border-radius: 0.7rem; padding: 0.9rem 1rem; background: var(--ink-2);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--ink-3));
  box-shadow: inset 3px 0 0 var(--accent);
}
.pg__result--ok { --accent: var(--ok); }
.pg__result--warn { --accent: var(--warn); }
.pg__result--bad { --accent: var(--bad); }
.pg__result--err { --accent: var(--dim); }
.pg__status { font: 800 1.15rem var(--md-code-font-family); color: var(--accent); letter-spacing: -0.02em; }
.pg__result--err .pg__status { color: var(--cream); }
.md-typeset .pg__result p { margin: 0.4rem 0 0; font-size: 0.72rem; }
.md-typeset .pg__resp {
  margin: 0.75rem 0 0; padding: 0.6rem 0.75rem; border-radius: 0.45rem;
  background: var(--ink-4); color: var(--cream); font-size: 0.64rem; line-height: 1.6;
  white-space: pre-wrap; word-break: break-word;
}
.pg__meter { margin-top: 0.75rem; height: 0.5rem; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--bad) 35%, var(--ink-3)); }
.pg__meter > div { height: 100%; background: var(--ok); transition: width 0.25s; }
.md-typeset .pg__trace { list-style: none; margin: 0.8rem 0 0; padding: 0; font: 0.64rem/1.6 var(--md-code-font-family); }
.md-typeset .pg__trace li { margin: 0; color: var(--dim); }
.md-typeset .pg__trace li.is-hit { color: var(--cream); font-weight: 700; }
@media (max-width: 60em) {
  .md-typeset .pg { grid-template-columns: minmax(0, 1fr); }
  .md-typeset .pg textarea { min-height: 16rem; }
}