/**
 * @file
 * The typography example.
 *
 * Every sample on that page is a block of `.text-formatted`, which is the
 * thing being demonstrated, so nothing here may reach inside one: a rule that
 * did would be styling the demonstration rather than showing it. What is left
 * is the scaffolding around a sample -- the frame it sits in, the column of
 * rules beside it, and the swatches of the custom properties -- and all of it
 * is addressed by a class of its own.
 *
 * Plain CSS with fallbacks, like library-pages.css: this ships from the module
 * and has to be readable in a theme that defines none of these variables.
 */

/*
 * A sample beside the rules that produce it.
 *
 * One column until there is room for two, and `align-items: start` so the
 * rules stay at the top of a tall sample rather than centring against it.
 * `minmax(0, ...)` on both tracks because a sample can hold a `pre` or a wide
 * table, and a grid item's automatic minimum size is its content -- without it
 * the sample refuses to shrink and pushes the rules off the page.
 *
 * The grid is capped at the width of what is in it rather than at the width of
 * the page, because the sample stops growing on its own: `.text-formatted`
 * caps itself at 65ch, so a fractional track any wider than that leaves the
 * rules stranded beside a frame that has already stopped. The `1rem` is what
 * makes the `ch` in that cap the same `ch` the prose measures itself in --
 * `.text-formatted` sets its own font size, and `ch` is resolved against the
 * font of the element the unit is written on.
 */
.prose-demo {
  display: grid;
  align-items: start;
  gap: 1.5rem;
  margin-block-end: 2.5rem;
  font-size: 1rem;
}

@media (min-width: 60rem) {
  .prose-demo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 21rem);
    max-width: calc(65ch + 21rem + 1.5rem);
  }
}

/*
 * The frame around a sample.
 *
 * The frame is deliberately not sized: `.text-formatted` sets `max-width: 65ch`
 * on itself, so the box takes the measure of the prose it holds and the measure
 * is visible as the edge of the frame. That is one of the rules on the page.
 */
.prose-demo__sample {
  min-width: 0;
  padding: 1.25rem 1.5rem;
  border: var(--border-width, 1px) solid var(--color-border, currentColor);
  border-radius: var(--border-radius, 4px);
  background-color: var(--background-color, #fff);
}

.prose-demo__rules {
  min-width: 0;
}

/*
 * The rules themselves, quoted from the built stylesheet.
 *
 * Monospace because they are CSS, and `overflow-wrap: anywhere` because a
 * declaration list is one long unbroken token run that would otherwise widen
 * the column past its track.
 */
.prose-rules {
  margin: 0;
  font-family: var(--font-mono, monospace);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.prose-rules dt {
  margin-block-start: 0.75rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.prose-rules dt:first-child {
  margin-block-start: 0;
}

.prose-rules dd {
  margin-inline-start: 0;
  color: var(--color-text-light, #595959);
  overflow-wrap: anywhere;
}

/* A rule that is generated but matches nothing, or is dropped as invalid. */
.prose-rules .prose-rules__inert {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

/*
 * A swatch of one `--un-prose-*` custom property.
 *
 * The colour arrives as `--swatch` on the element, because the property being
 * shown differs per row and the set of them is the preset's, not this file's.
 * It is painted as a gradient layer rather than as `background-color` so that
 * it sits above the chequerboard: two of these values are translucent, and a
 * flat background would show them against the page and read as opaque.
 */
.prose-swatch {
  display: inline-block;
  inline-size: 2.5rem;
  block-size: 1rem;
  vertical-align: -0.15em;
  border: var(--border-width, 1px) solid var(--color-border, currentColor);
  border-radius: 2px;
  background-image:
    linear-gradient(var(--swatch, transparent), var(--swatch, transparent)),
    repeating-conic-gradient(#ccc 0 25%, #fff 0 50%);
  background-size: auto, 0.5rem 0.5rem;
}