/* Optional-ingredient pill component (#3603) — a static "optional" marker,
   loaded globally (app/views/layouts/application.html.erb) so it's available
   to both the recipe page (after the ingredient quantity) and the pantry
   shelf row (Task 11) without either page sheet re-declaring it. Not
   interactive: no state ladder (a static pill is the whole ladder —
   docs/wiki/style.md § The state ladder).
   Faint via --text-soft (text) + --rule (border), NOT opacity: a parent
   opacity composites the whole subtree below WCAG AA regardless of each
   child's own color (#2171 ship a11y gate — same fix as base.css's
   .app-version rule). The border is decorative chrome, not text, so it can
   stay lighter than the AA-gated label — --rule matches .badge--outlined's
   own border token (components/badge.css).
   Collaborators: components/_optional_pill.html.erb, demos/_optional_pill.html.erb. */

.optional-pill {
  font-size: 0.7em;
  font-variant: small-caps;
  letter-spacing: 0.05em;
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  padding: 0 0.55em;
  color: var(--text-soft);
  vertical-align: 0.15em;
  margin-left: 0.35em;
}