/* The examples wrappers.
 *
 * Each wrapper is a documentation PAGE about an artifact; the artifact itself
 * is the file under raw/, unchanged and standalone. That split is deliberate
 * and is the only way both halves of "one menu everywhere" and "an email is
 * still an email" can be true at once -- a documentation bar welded to the top
 * of an HTML email stops it being one, and a deck would repeat it per slide.
 *
 * So the frame below is an <iframe>, not an include. The artifact renders in
 * its own document, with its own <head>, at its own width, exactly as a client
 * receives it. Nothing here can leak into it and nothing in it can restyle
 * this page.
 */

.ex { max-width: 68rem; margin: 0 auto; padding: 3rem 1.5rem 6rem; }

.ex-head { margin-bottom: 2rem; }
.ex-head h1 { margin: 0.25rem 0 0.75rem; color: var(--color-heading); }
.ex-lead {
  max-width: 60ch;
  color: var(--color-body-secondary-lighter);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
}
.ex-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
}
.ex-actions code {
  color: var(--color-body-secondary);
  font-size: var(--text-caption);
}

/* The frame. `resize: vertical` because the useful height genuinely differs per
   artifact -- a poster wants to be tall, an email wants to be scrolled -- and
   guessing one number per artifact would be a number to maintain. */
.ex-frame {
  border: 1px solid var(--color-surface-quaternary);
  border-radius: var(--radius-card);
  background: var(--color-surface-primary);
  overflow: hidden;
  resize: vertical;
}
.ex-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 32rem;
  border: 0;
}
.ex-frame[data-ratio="16:9"] { aspect-ratio: 16 / 9; }
.ex-frame[data-ratio="3:4"]  { aspect-ratio: 3 / 4; max-width: 34rem; }
.ex-frame[data-ratio="tall"] iframe { height: 46rem; }

.ex-notes { margin-top: 3rem; }
.ex-notes h2 { color: var(--color-heading); font-size: var(--text-lg); }
.ex-notes p {
  max-width: 68ch;
  color: var(--color-body-secondary-lighter);
  font-size: var(--text-base);
  line-height: var(--leading-base);
}
.ex-notes strong { color: var(--color-body-primary); }