/* The live examples (docs/site/src/charts.jsx): the chart on the page's surface, the event panel below it; and what the site adds to the shared design. */
.psu-example {
  margin: 1em 0 0.6em;
  padding: 0.6em 0.4em;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.2rem;
  background: var(--md-default-bg-color);
  min-height: 4em;
}
.psu-example-error {
  color: var(--md-typeset-color);
  border-left: 0.2rem solid #e53935;
  padding: 0.4em 0.8em;
}
.psu-event {
  position: relative;
  margin: -0.2em 0 0.8em;
  padding: 0.6em 2.2em 0.6em 0.9em;
  border: 1px solid var(--md-accent-fg-color);
  border-radius: 0.2rem;
  background: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
  font-size: 0.7rem;
}
.psu-event pre {
  margin: 0.4em 0 0;
  max-height: 16em;
  overflow: auto;
  white-space: pre-wrap;
  font-size: 0.65rem;
}
.psu-event-close {
  position: absolute;
  top: 0.2em;
  right: 0.4em;
  border: 0;
  background: none;
  color: var(--md-default-fg-color--light);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.psu-event-close:focus-visible { outline: 2px solid var(--md-accent-fg-color); }

/* Headings with a long command name (Get-UDPivotSqlColumnDescription) wrap on a phone instead of
   widening the page: the design's h2 is a flex row (eizedev/brand docs-site/site.css), and its text
   would not shrink below its longest word. */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  overflow-wrap: anywhere;
}