/* Highlight Pills — a row of short claims, each one a rounded chip.
 *
 * No script: the row is flex-wrap, every value is a custom property, and the
 * pills are right on first paint.
 *
 * The built-in icons take `currentColor` rather than a colour setting of their
 * own. A pill's icon is never a different colour from its words — one fewer
 * setting, and one fewer way to end up with an invisible icon on a dark chip.
 */

.pb-pil {
  font-family: inherit;
  margin-block: var(--pb-pil-st, 0) var(--pb-pil-sb, 0);
}

.pb-pil__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: var(--pb-pil-a, flex-start);
  gap: var(--pb-pil-g, 8px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.pb-pil__item {
  --pbi-s: var(--pb-pil-is, 16px);
  --pbi-c: currentColor;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-width: 0;
  padding: var(--pb-pil-py, 9px) var(--pb-pil-px, 16px);
  background: var(--pb-pil-bg, #f2f2f3);
  color: var(--pb-pil-fg, #1a1a1a);
  font-size: var(--pb-pil-fs, 14px);
  line-height: 1.25;
  border-radius: var(--pb-pil-r, 999px);
  border: var(--pb-pil-bw, 0) solid color-mix(in srgb, var(--pb-pil-fg, #1a1a1a) 28%, transparent);
}

.pb-pil--bold .pb-pil__item { font-weight: 700; }
.pb-pil--caps .pb-pil__item { text-transform: uppercase; letter-spacing: 0.04em; }

.pb-pil--rounded .pb-pil__item { border-radius: 8px; }
.pb-pil--square .pb-pil__item { border-radius: 0; }

/* An emoji is text, so it would ride on the font size of the words. Sizing it
   from the icon setting instead keeps one dial for both kinds of mark. */
.pb-pil__em {
  font-size: var(--pb-pil-is, 16px);
  line-height: 1;
  flex: 0 0 auto;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

.pb-pil__hint {
  margin: 0;
  padding: 0.75rem;
  border: 1px dashed color-mix(in srgb, currentColor 35%, transparent);
  border-radius: 6px;
  font-size: 0.85rem;
  opacity: 0.7;
  text-align: center;
}

/* pb-icons:start — written by scripts/sync-icons.mjs, do not edit by hand */
.pbi{width:var(--pbi-s,20px);height:var(--pbi-s,20px);flex:0 0 auto;background:var(--pbi-c,currentColor);-webkit-mask:var(--pbi-src) center / contain no-repeat;mask:var(--pbi-src) center / contain no-repeat}
.pbi--cf{--pbi-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M2 12a10 10 0 1 0 20 0a10 10 0 1 0-20 0M10.5 16.3 6.2 12l1.5-1.5 2.8 2.8 5.8-5.8L17.8 9z'/%3E%3C/svg%3E")}
.pbi--ck{--pbi-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9 17.5 20 6.5'/%3E%3C/svg%3E")}
.pbi--tk{--pbi-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6h12v10H2zM14 9h4l4 3.5V16h-8z'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3Ccircle cx='17.5' cy='18' r='2'/%3E%3C/svg%3E")}
.pbi--sh{--pbi-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5 20 5.5v5.8c0 5-3.4 8.7-8 10.2-4.6-1.5-8-5.2-8-10.2V5.5z'/%3E%3Cpath d='m8.5 12 2.5 2.5 4.5-5'/%3E%3C/svg%3E")}
.pbi--rf{--pbi-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 12a8.5 8.5 0 1 1-2.6-6.1'/%3E%3Cpath d='M20.5 3v5h-5'/%3E%3C/svg%3E")}
.pbi--lf{--pbi-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20.5C3 12 8 4.5 20.5 3.5c1 11-5 16-12.5 16z'/%3E%3Cpath d='M7.5 17.5c2.5-4.5 5.5-7 9-8.5'/%3E%3C/svg%3E")}
.pbi--st{--pbi-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.9 6 6.5 1-4.7 4.6 1.1 6.5-5.8-3.1-5.8 3.1 1.1-6.5L2.6 9.6l6.5-1z'/%3E%3C/svg%3E")}
.pbi--cl{--pbi-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='M12 6.5V12l3.8 2.2'/%3E%3C/svg%3E")}
.pbi--lk{--pbi-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.8 10V7.5a5.2 5.2 0 0 1 10.4 0V10'/%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3C/svg%3E")}
.pbi--hs{--pbi-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14v-2a8 8 0 0 1 16 0v2'/%3E%3Crect x='2.5' y='13' width='4.5' height='6' rx='2'/%3E%3Crect x='17' y='13' width='4.5' height='6' rx='2'/%3E%3Cpath d='M21 19v.5a2.5 2.5 0 0 1-2.5 2.5H13'/%3E%3C/svg%3E")}
.pbi--bx{--pbi-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8 21 7v10l-9 4.2L3 17V7z'/%3E%3Cpath d='M3 7l9 4.2L21 7M12 11.2V21.2'/%3E%3C/svg%3E")}
.pbi--md{--pbi-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9.5' r='6.5'/%3E%3Cpath d='m8.5 15.2-1.3 6.3 4.8-2.6 4.8 2.6-1.3-6.3'/%3E%3C/svg%3E")}
.pbi--cd{--pbi-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2.5'/%3E%3Cpath d='M2.5 9.8h19M6 15h3.5'/%3E%3C/svg%3E")}
.pbi--pp{--pbi-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.5 2.5 2 9.8l8.3 3.4 3.4 8.3z'/%3E%3Cpath d='m10.3 13.2 11.2-10.7'/%3E%3C/svg%3E")}
.pbi--gf{--pbi-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8.5' width='18' height='4.5' rx='1'/%3E%3Cpath d='M4.5 13v7.5a1 1 0 0 0 1 1h13a1 1 0 0 0 1-1V13M12 8.5v13'/%3E%3Cpath d='M12 8.5S10.8 3 8 3a2.5 2.5 0 0 0 0 5.5zM12 8.5S13.2 3 16 3a2.5 2.5 0 0 1 0 5.5z'/%3E%3C/svg%3E")}
/* pb-icons:end */