/* ============================================================================
   "Written for" audience line (`.mb-written-for`)
   ----------------------------------------------------------------------------
   A single line of role pills that sits directly under the page h1, telling
   the reader which roles a guide applies to. Emitted at build time by
   overrides/partials/content.html from the page's audience tag (Using OCC /
   Managing OCC / Administering OCC) via the ordered [project.extra]
   mb_audiences registry in zensical.toml. Pill colours come from labels.css.

   Design intent: read as page furniture, not the first paragraph. Tight to
   the title above (the h1's usual 1.25em bottom margin is pulled in when this
   line follows it), roomy below so title + audience form one header unit and
   the body clearly starts after. Same size and colour as the breadcrumbs so
   it shares their "metadata" voice. Pill size is pinned in rem so the pills
   stay legible while the label text goes quiet.
   ============================================================================ */

.md-typeset h1:has(+ .mb-written-for) {
  margin-bottom: 0.35em;
}

.md-typeset .mb-written-for {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.35rem;
  margin: 0 0 2.4em;
  font-size: 0.7rem;
  line-height: 1.5;
  color: var(--md-default-fg-color--light);
}

.md-typeset .mb-written-for__label {
  margin-right: 0.15rem;
}

/* Pills: fixed size independent of the muted label text (overrides
   labels.css's em-relative sizing; icon gap/alignment come from labels.css). */
.md-typeset .mb-written-for .mb-label {
  font-size: 0.6rem;
  line-height: 1.5;
  padding: 0.12em 0.55em;
}

.md-typeset .mb-written-for .mb-label .twemoji svg {
  width: 1.15em;
  height: 1.15em;
}