/* queue-bar.css: Queue bar (component 10). Owner: group B (P2.T5).
   A role="toolbar" row, gap --space-3, --space-5 below. Chip: --size-filter-chip (32), padding-inline --space-4, --radius-control, 1 px
   --border, --surface, label --type-button, count --type-label tabular in --text-secondary after --space-3. Active: --brand-subtle, 1 px
   --brand, label and count --text. Urgent counts above zero: --critical and an alert-circle. Zero: muted. Scrolls inline, never wraps;
   at small width the row gives way to a select (02 Responsive behaviour). */
[data-component="queue-bar"] {
  display: block;
  margin-block-end: var(--space-5);
  min-inline-size: 0;
}
.queue-bar__chips {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-3);
  overflow-x: auto;
  scrollbar-width: thin;
}
.queue-bar__chip {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--space-3);
  box-sizing: border-box;
  min-block-size: var(--size-filter-chip);
  padding-block: 0;
  padding-inline: var(--space-4);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--text);
  font: var(--type-button);
  white-space: nowrap;
  cursor: pointer;
}
.queue-bar__label { color: var(--text); }
.queue-bar__urgent { display: inline-flex; color: var(--critical); }
.queue-bar__urgent:empty { display: none; }
.queue-bar__count {
  color: var(--text-secondary);
  font: var(--type-label);
  font-variant-numeric: tabular-nums lining-nums;
}
.queue-bar__count[data-urgent="true"] { color: var(--critical); }
.queue-bar__count[data-muted="true"] { color: var(--text-muted); }

.queue-bar__chip:hover,
.queue-bar__chip[data-force="hover"],
[data-force="hover"] .queue-bar__chip { background: var(--surface-hover); }
.queue-bar__chip:active,
.queue-bar__chip[data-force="active"],
[data-force="active"] .queue-bar__chip { background: var(--border); }
.queue-bar__chip[aria-pressed="true"],
.queue-bar__chip[aria-pressed="true"]:hover,
[data-force="hover"] .queue-bar__chip[aria-pressed="true"],
.queue-bar__chip[aria-pressed="true"][data-force="hover"] { background: var(--brand-subtle); border-color: var(--brand); }
.queue-bar__chip[aria-pressed="true"] .queue-bar__count:not([data-urgent="true"]) { color: var(--text); }
/* The ring sits inside the edge: the row scrolls, so an outside ring would be clipped (02 Global state recipe). */
.queue-bar__chip:focus-visible,
.queue-bar__chip[data-force="focus-visible"],
[data-force="focus-visible"] .queue-bar__chip {
  outline: var(--border-width-thick) solid var(--focus-ring);
  outline-offset: calc(-1 * var(--border-width-thick));
}
.queue-bar__chip[aria-disabled="true"] { background: var(--surface-sunken); color: var(--text-disabled); border-color: var(--border); cursor: not-allowed; }
.queue-bar__chip[aria-disabled="true"] .queue-bar__label,
.queue-bar__chip[aria-disabled="true"] .queue-bar__count { color: var(--text-disabled); }

/* Small: a select replaces the row. */
.queue-bar__select {
  display: none;
  box-sizing: border-box;
  inline-size: 100%;
  min-block-size: var(--size-control);
  padding-inline: var(--space-4);
  border: var(--border-width) solid var(--border-control);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--text);
  font: var(--type-body);
}
@media (width < 768px) {
  .queue-bar__chips { display: none; }
  .queue-bar__select { display: block; }
}

/* Kitchen sink only: a states-grid sample shows one chip; the second is the filler that lets the first be unselected. */
.queue-bar-demo__single { margin-block-end: 0; }
.queue-bar-demo__single .queue-bar__chip:last-child { display: none; }