/* C01 prototype. Load once in the staging Page Layout, not per content item.
   Use the site's established layer order; no new global reset or tokens. */
@layer components {
  .c01 {
    color: inherit;
    max-inline-size: 75ch;
    min-inline-size: 0;
    margin-block: 2rem;
    overflow-wrap: anywhere;
    scroll-margin-block-start: var(--c01-anchor-offset, 6rem);
  }
  .c01--callout {
    border-inline-start: 0.25rem solid currentColor;
    padding: clamp(1rem, 3vw, 1.75rem);
    /* The shell can supply brand-approved tokens later. */
    background: var(--c01-callout-background, transparent);
  }
  .c01__heading { margin-block: 0 1rem; }
  .c01__figure { margin: 0; margin-block: 1.25rem; }
  .c01__image { display: block; max-inline-size: 100%; block-size: auto; }
  .c01__caption { font-size: 0.9375em; margin-block-start: 0.5rem; }
  .c01__caption > :first-child, .c01__body > :first-child { margin-block-start: 0; }
  .c01__caption > :last-child, .c01__body > :last-child { margin-block-end: 0; }
  .c01__body { overflow-x: auto; padding-block: 0.25rem; }
  .c01 :where(a) { text-decoration: underline; text-underline-offset: 0.18em; }
  .c01 :where(a, [tabindex]):focus-visible {
    outline: 0.1875rem solid currentColor;
    outline-offset: 0.1875rem;
  }
  .c01 :where(p, ul, ol, blockquote, table) { margin-block: 1rem; }
  .c01 :where(ul, ol) { padding-inline-start: 1.5em; }
  .c01 :where(blockquote) { margin-inline: 0; padding-inline-start: 1em; border-inline-start: 0.125rem solid currentColor; }
  .c01 :where(table) { border-collapse: collapse; inline-size: 100%; }
  .c01 :where(caption) { text-align: start; font-weight: 600; padding-block-end: 0.5rem; }
  .c01 :where(th, td) { text-align: start; vertical-align: top; border: 1px solid currentColor; padding: 0.625rem; }
  .c01__validation { border: 2px solid currentColor; padding: 1rem; }
}