/* control-chip.css: Control chip (component 9). Owner: group B (P2.T5).
   Height --size-chip-control (24, a minimum), padding-inline --space-3, gap --space-2, --radius-chip, --surface, 1 px --border-control,
   --type-label in --text, leading icon --icon-xs. An overridden control adds a 2 px --brand inline-start marker. */
.control-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  box-sizing: border-box;
  min-block-size: var(--size-chip-control);
  max-inline-size: 100%;
  padding-block: 0;
  padding-inline: var(--space-3);
  border: var(--border-width) solid var(--border-control);
  border-radius: var(--radius-chip);
  background: var(--surface);
  color: var(--text);
  font: var(--type-label);
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
  text-align: start;
  vertical-align: middle;
}
button.control-chip { cursor: pointer; }
.control-chip .icon { flex: none; color: var(--text-secondary); }
.control-chip__value { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; }

/* Override marker: the value differs from the inherited one. The 2 px replaces the 1 px outline on that edge only, so the chip
   keeps its height and the marker is not colour alone (the popover names the source, the accessible name says "overridden"). */
.control-chip[data-overridden="true"] {
  border-inline-start: var(--border-width-thick) solid var(--brand);
}

/* Hover and pressed (02 recipe): neutral controls take --surface-hover, then --border. */
button.control-chip:hover,
button.control-chip[data-force="hover"] { background: var(--surface-hover); }
button.control-chip:active,
button.control-chip[data-force="active"] { background: var(--border); }
button.control-chip[aria-expanded="true"] { background: var(--surface-hover); }
button.control-chip:focus-visible,
button.control-chip[data-force="focus-visible"] {
  outline: var(--border-width-thick) solid var(--focus-ring);
  outline-offset: var(--space-2);
}
.control-chip[aria-disabled="true"] {
  background: var(--surface-sunken);
  border-color: var(--border);
  color: var(--text-disabled);
  cursor: not-allowed;
}
.control-chip[aria-disabled="true"] .icon { color: var(--text-disabled); }

/* "+N": a count chip of the same size, not a control. */
.control-chip--count { background: var(--surface-sunken); border-color: var(--border); color: var(--text-secondary); }

/* Groups: in a table cell the chips sit tight; in a drawer or header they wrap with --space-3. */
[data-component="control-chip"].control-chips,
.control-chips { display: inline-flex; align-items: center; gap: var(--space-2); max-inline-size: 100%; }
.control-chips--list { display: flex; flex-wrap: wrap; gap: var(--space-3); }
[data-component="control-chip"].control-chips { border: 0; background: none; padding: 0; min-block-size: 0; }

/* The inheritance list in the popover (the real Trace replaces it where a page passes `trace`). */
.control-chip__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.control-chip__step {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-1) var(--space-4);
  padding-block: var(--space-2);
  padding-inline: var(--space-4);
  border-inline-start: var(--border-width-thick) solid var(--border-strong);
  max-inline-size: none;
}
.control-chip__step[data-active="true"] { border-inline-start-color: var(--brand); background: var(--brand-subtle); }
.control-chip__step-level { font: var(--type-label); color: var(--text-secondary); }
.control-chip__step-value { font: var(--type-button); color: var(--text); text-align: end; font-variant-numeric: tabular-nums lining-nums; }
.control-chip__step-note { grid-column: 1 / -1; font: var(--type-caption); color: var(--text-secondary); }