/* FieldChip: a key and its value on a square (17 Oct 2026, the polish round). The artboards' `.fld`:
   a 1 px ink hairline, the key in bold mono at 11 px and the value after it in the reading face, a
   grey × at the end. Square where the artboards draw it round: a chip is cut from the ground (the
   corners rule, tokens.css). Dashed when a reader guessed it, greyed on a dismissed row, filled with
   the panel's grey for the one key of a set that differs in kind. */
.field-chip {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-1);
  max-width: 100%;
  box-sizing: border-box;
  padding: var(--field-chip-padding);
  border: var(--hairline) solid var(--color-ink);
  border-radius: var(--radius-chip);
  background: var(--color-shell);
  color: var(--color-ink);
  font-size: var(--text-meta);
  line-height: var(--leading-section);
  vertical-align: middle;
  white-space: nowrap;
}

.field-chip-key {
  font-family: var(--font-mono);
  font-size: var(--text-mono-lg);
  font-weight: var(--weight-strong);
}

.field-chip-value {
  overflow: hidden;
  text-overflow: ellipsis;
}

.field-chip-guessed {
  border-style: dashed;
}

.field-chip-quiet {
  border-color: var(--color-line-later);
  color: var(--color-muted);
}

.field-chip-tinted {
  background: var(--color-line-panel);
}

.field-chip-x {
  align-self: center;
  margin-right: calc(var(--space-1) * -1);
  padding: 0 var(--space-1);
  border: 0;
  background: none;
  color: var(--color-muted);
  font: inherit;
  line-height: 1;
  cursor: pointer;
}

.field-chip-x:hover:not([disabled]),
.field-chip-x:focus-visible {
  color: var(--color-ink);
}

.field-chip-x:focus-visible {
  outline: var(--focus-width) solid var(--color-ink);
  outline-offset: 0;
}

.field-chip-x[disabled] {
  cursor: default;
}

/* A run of them, as a row's or a group's decorations sit. */
.field-chips {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
}