---
/**
 * docs/02: "Small bordered label for designations and sector chips."
 *
 * A PARENT CANNOT STYLE THIS ELEMENT. Astro does not pass a parent's scope
 * attribute to a child component's root, so `<Pill class="chip" />` compiles the
 * parent's `.chip` rule against the parent's cid and it never matches — the
 * defect CLAUDE.md records for <Button> in SiteHeader, which then recurred with
 * <Picture> in InfinityMark. CLAUDE.md names Pill as the next place it will
 * happen.
 *
 * THE HOOK IS A CUSTOM PROPERTY, and that is the one mechanism that legitimately
 * crosses the boundary: custom properties inherit. An ancestor sets
 * `--pill-border` / `--pill-fg` on ITSELF and this component reads it. No
 * :global(), no wrapper div, and no rule that silently does nothing.
 */
/**
 * No props. A `class?: string` was declared and never passed, and a parent
 * cannot reach this root regardless — see SectionHeading for the measurement
 * and CLAUDE.md for the rule. The custom-property hooks below are how an
 * ancestor influences it.
 */
---

<span class="pill"><slot /></span>

<style>
  .pill {
    display: inline-flex;
    align-items: center;
    padding-block: var(--space-1);
    padding-inline: var(--space-3);
    border: 1px solid var(--pill-border, var(--border));
    border-radius: var(--radius-full);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-wide);
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--pill-fg, var(--text-meta));
    white-space: nowrap;
  }
</style>