/* De kaart waarin een visual staat: kleuren, maat, kop en pill. Dit bestand hoort bij de componenten. */
:root {
  --c-red: #B01338;
  --c-ink: #425D66;
  --c-teal: #557C89;
  --c-green: #2F8268;
  --c-gold: #E6B549;
  --c-white: #fff;
  --c-creme: #F0EAD9;
  --fh: 'Poppins', system-ui, sans-serif;
  --r: 20px;
}

.stage {
  box-sizing: border-box;
  width: 550px;
  max-width: 100%;
  padding: 0;
  overflow: hidden;
  background: var(--c-white);
  border-radius: var(--r);
}

/* De kop linksboven, gelijk aan de koppen die de componenten zelf tekenen. */
.stage h3 {
  margin: 0;
  font: 700 13px var(--fh);
  letter-spacing: .03em;
  text-transform: uppercase;
}

div[data-role=pill] {
  width: fit-content;
  padding: 6px 16px;
  border-radius: 999px;
  pointer-events: none;
}

p[data-role=pill-label] {
  margin: 0;
  font-family: var(--fh);
  font-weight: 800;
  font-size: 12px;
  color: var(--c-white);
  white-space: nowrap;
  text-align: center;
}