/*
 * .style-example
 * Stacked wrapper used in the SkillCred Task Style guide.
 * The Source column sits above the Rendered preview so neither has to share
 * horizontal space with the other — long paths and command lines do not
 * overflow into a scrollbar.
 *
 * The rendered column uses `.style-example-h1` / `.style-example-h2` /
 * `.style-example-h3` stand-ins instead of real `#` / `##` / `###` headings
 * so the example previews do not pollute the host page's table of contents,
 * anchor permalinks, or heading hierarchy.
 */

.style-example {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 1.5rem 0;
}

.style-example-source,
.style-example-rendered {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.2rem;
  padding: 0.75rem 1rem 1rem;
}

.style-example-source::before,
.style-example-rendered::before {
  display: block;
  margin-bottom: 0.6rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--md-default-fg-color--light);
}

.style-example-source::before    { content: "Source"; }
.style-example-rendered::before  { content: "Rendered preview"; }

/*
 * Heading stand-ins for the rendered column.
 * Mirror Material's H1/H3 typography but stay as paragraphs so they do not
 * register in the page TOC or claim anchor permalinks.
 */
.style-example-rendered .style-example-h1,
.style-example-rendered .style-example-h2,
.style-example-rendered .style-example-h3 {
  font-weight: 400;
  line-height: 1.3;
  color: var(--md-default-fg-color);
}

.style-example-rendered .style-example-h1 {
  font-size: 1.6em;
  margin: 0 0 1rem;
  letter-spacing: -0.01em;
}

.style-example-rendered .style-example-h2 {
  font-size: 1.3em;
  margin: 1.4em 0 0.6em;
  letter-spacing: -0.005em;
}

.style-example-rendered .style-example-h3 {
  font-size: 1.1em;
  margin: 1.2em 0 0.5em;
}