/* Chip — DESIGN_COMPONENTS.md §4.14.

   Scoped under `.ds`, matching design-system-tokens.css's scoping (the old
   system already owns bare token names at `:root`; the new system stays
   inside the `.ds` element the design-system route wraps itself in until
   the old screens are gone).

   NOTE ON THE EXISTING `.ds-chip` IN design-system-page.css
   -------------------------------------------------------------
   That file already defines a `.ds-chip` for the page's own use (its
   comment cites §2.4 rule 5 and §2.5 rule 2 — the same rules this file
   follows) at the SAME specificity (0-1-0) as the class this file defines.
   Whichever stylesheet loads second wins the collision, which is exactly
   the "seemed not to apply" trap the task brief warns about. The two rules
   are near-identical today, but they are not the same file and were not
   meant to coexist — see the component report for the reconciliation this
   needs (delete the page's copy, since design-system-page.css is not a
   file this task may edit). */

.ds-chip {
	display: inline-flex;
	align-items: center;
	/* §2.4 rule 8: a glyph beside text sits at `space-xs`, at every size. */
	gap: var(--space-xs);
	/* Bounded so a constrained ancestor (see .ds-chip__label below) can make
     it shrink instead of overflowing. A chip with no constrained ancestor
     simply sizes to its content, as usual. */
	max-width: 100%;
	/* §2.4 rule 7 / DESIGN.md §7: asymmetric padding — space-xs horizontal,
     space-2xs vertical — so the label clears the border while adding as
     little as possible to the row it sits in. */
	padding: 0 var(--space-xs);
	/* §4.14 rule 3: pinned to a text line, border included, so a tag never
     changes the height of the line it sits beside. `default` takes the
     `text-base` line (20px) — the body line it sits beside outside a table.
     `small` (below) takes the `text-sm` line, the table cell's own. Left to
     its own box the small chip came out 17px against a 16px line — one
     pixel of overflow that cost the whole table the 30px variant (§2.7
     rules 4–5). */
	box-sizing: border-box;
	height: var(--text-base-leading);
	/* §2.5 rule 2: a chip is a control (button, input, chip, icon button), so
     it takes rounded-sm, not the overlay radius. */
	border-radius: var(--rounded-sm);
	/* §3.10 rule 6: neutral by default. A tone changes the glyph, label and
     border only, never the fill. */
	background: transparent;
	border: var(--border-width-light) solid var(--border-color-default);
	color: var(--text-primary);
	font-family: var(--font-sans);
	/* §4.14 rule 2: compact labels use text-xs at both sizes. */
	font-size: var(--text-xs);
	line-height: var(--text-xs-leading);
	/* §4.14 rule 6: a chip is inert — no hover, no pressed state, no selection,
     no focus ring, and it is never given a tab stop. There is no state
     styling below this line because there is no state to style. */
}

/* §4.14 size table: `small` is the chip inside another component — a table
   cell (§4.8 rule 25), a list row, a lockup on a text line (§4.15B). The
   label is `text-xs` (§2.1D rule 8's component label) and the box is
   pinned to the `text-sm` line the cell holds, so a tag never changes the
   height of the row it sits in. This was the only chip until the `default`
   size above existed. */
.ds-chip--small {
	height: var(--text-sm-leading);
	font-size: var(--text-xs);
	line-height: var(--text-xs-leading);
}

.ds-chip__label {
	/* §4.14 rule 10: a chip's label never wraps and never truncates. If it does
     not fit at its size, the label is wrong, not the chip — truncating a tag
     hides the one thing it exists to say. */
	white-space: nowrap;
}

/* The count is its own part: `text-secondary` at `weight-medium`, so the
   label reads as the thing and the count as how many of it. Parentheses would
   make the reader parse punctuation to find the same fact. */
.ds-chip__count {
	font-weight: var(--weight-medium);
	color: var(--text-secondary);
}

.ds .ds-chip--error {
	border-color: var(--status-error-border);
	color: var(--status-error-fg);
}

.ds .ds-chip--warning {
	border-color: var(--status-warning-border);
	color: var(--status-warning-fg);
}

.ds .ds-chip--success {
	border-color: var(--status-success-fg);
	color: var(--status-success-fg);
}

.ds .ds-chip--brand {
	border-color: var(--action-primary-bg);
	color: var(--text-link);
}