.part-chip { display: inline-flex; align-items: center; gap: var(--space-1); height: 22px; padding: 0 var(--space-2); border-radius: var(--radius);
  font-size: var(--type-small);
  background: var(--raised); color: var(--fg); white-space: nowrap; max-width: 100%; overflow: hidden; }
.part-chip-x { border: 0; background: transparent; color: var(--muted); padding: 0; min-height: 0; }
/* under a finger (row 807, measured in the api.v1d.io sketch): the cross, 11 x 15 px, has an invisible box of 35 x 45 px to press; the chip's word is what clips then, with an ellipsis, so the chip itself does not cut the box off */
@media (pointer: coarse) {
  .part-chip:has(> .part-chip-x) { overflow: visible; min-width: 0; }   /* min-width: a chip that is a flex item no longer shrinks to its row by its clip, so it says it can */
  .part-chip:has(> .part-chip-x) > .word { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .part-chip-x { position: relative; }
  .part-chip-x::after { content: ""; position: absolute; top: 50%; left: 50%; width: 35px; height: 45px; transform: translate(-50%, -50%); }
}
.part-chip > .word { text-box: trim-both cap alphabetic; }
/* its icons lead its word (`icons`, row 1612; row 1747: the icons alone left a phone's play row with a magnet nobody could name, so the word is drawn after them, cut with an
   ellipsis where the row is short); 32 px high with a 44 px box under a finger */
.part-chip.has-icons { box-sizing: border-box; height: 32px; min-width: 0; gap: var(--space-2); padding: 0 var(--space-3); border: 0; }
button.part-chip.has-icons { cursor: pointer; -webkit-tap-highlight-color: transparent; }
/* row 1974: with icons and nothing to press (no onpress or onedit, so a span) it is information: a tag, its icon and word on the ground, no fill, no frame */
span.part-chip.has-icons { height: auto; min-height: 24px; padding: 0; gap: var(--space-1); background: transparent; color: var(--fg); }
span.part-chip.has-icons > svg { color: var(--muted); }
.part-chip.has-icons > svg { flex: none; }
.part-chip.has-icons > .word { min-width: 0; overflow: hidden; text-overflow: ellipsis; text-box: normal; }   /* the trim off, as a named chip's, so a g is not clipped */
button.part-chip.has-icons:active { background: var(--control); }
button.part-chip.has-icons:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* its letters centred, not its descender space */
@media (pointer: coarse) { button.part-chip.has-icons { position: relative; overflow: visible; } button.part-chip.has-icons::after { content: "";
  position: absolute; inset: -6px -4px; } }
/* a phrase of the page's own data (`named`, row 1100: a catalogue's example title is five to eleven words): one line, cut with an ellipsis where its line ends, whole in its tooltip; the trim is off so that a g or a y is not clipped */
.part-chip.is-named { min-width: 0; }
.part-chip.is-named > .word { min-width: 0; overflow: hidden; text-overflow: ellipsis; text-box: normal; }
/* a result's standing (row 14n10 of the API): the chip tinted green, orange or red over its own ground, its word still in --fg */
.part-chip.tone-good { background: color-mix(in oklab, var(--fact-green) 28%, var(--raised)); }
.part-chip.tone-warn { background: color-mix(in oklab, var(--fact-orange) 28%, var(--raised)); }
.part-chip.tone-bad { background: color-mix(in oklab, var(--fact-red) 28%, var(--raised)); }
/* a chip that is pressed (row 1092, the API site's example chips): a frame and the muted word until it is the one in force, then the control's ground and the word in --fg; 28 px high, with a 44 px box to press under a finger */
.part-chip.is-press { box-sizing: border-box; height: 28px; padding: 0 var(--space-3); border: 1px solid var(--border); background: transparent;
  color: var(--muted); font-family: var(--font); cursor: pointer;
  -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }
@media (hover: hover) { .part-chip.is-press:hover { border-color: var(--control); color: var(--fg); } }
.part-chip.is-press[aria-pressed="true"] { background: var(--control); border-color: var(--control); color: var(--fg); }
.part-chip.is-press:active { background: var(--control); border-color: var(--control); color: var(--fg); }   /* held pressed, the ground of the one in force, as the round button's (row 1100, K6) */
.part-chip.is-press:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (pointer: coarse) { .part-chip.is-press { position: relative; overflow: visible; } .part-chip.is-press::after { content: ""; position: absolute; inset: -8px -4px; } }
button.part-chip, .part-chip-x { -webkit-tap-highlight-color: transparent; }   /* a press answers in its own shape, never with Chrome's tap box */
/* a state mark (`sign`, v1d-sites 2.11): its sign before its word on the chip's own fill, 24 px, the word muted and the sign in its tone's colour; the tint of a result is not its */
.part-chip.is-mark { box-sizing: border-box; height: 24px; gap: var(--space-1); padding: 0 var(--space-2); color: var(--muted); }
.part-chip.is-mark > svg { flex: none; }
.part-chip.is-mark:is(.tone-good, .tone-warn, .tone-bad) { background: var(--raised); }
.part-chip.is-mark.tone-good > svg { color: var(--fact-green); }
.part-chip.is-mark.tone-warn > svg { color: var(--fact-orange); }
.part-chip.is-mark.tone-bad > svg { color: var(--fact-red); }