/* Chips (filters), pills (status), tabs and segmented control ------------ */

/* ---- Filter chips ------------------------------------------------- */
.pw-chips { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.pw-chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: var(--control-h-sm); padding: 0 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink-2);
  font: 600 var(--text-sm)/1 var(--font-body);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.pw-chip:hover { border-color: var(--ink-3); }
.pw-chip[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.pw-chip__count { opacity: .7; }

/* ---- Status pills ------------------------------------------------- */
.pw-pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 10px;
  border-radius: var(--radius-pill);
  font: 700 var(--text-xs)/1 var(--font-body);
  white-space: nowrap;
  background: var(--surface-2); color: var(--ink-2);
}
.pw-pill--lg { height: 26px; }
.pw-pill--xs { height: 20px; padding: 0 8px; font-size: 11px; gap: 4px; }
.pw-pill__dot { width: 6px; height: 6px; border-radius: var(--radius-pill); background: currentColor; }
.pw-pill--crit { background: var(--crit-soft); color: var(--crit); }
.pw-pill--warn { background: var(--warn-soft); color: var(--warn); }
.pw-pill--info { background: var(--info-soft); color: var(--info); }
.pw-pill--ok { background: var(--ok-soft); color: var(--ok); }
.pw-pill--brand { background: var(--brand-soft); color: var(--brand-text); }
.pw-pill__swatch { width: 8px; height: 8px; border-radius: 3px; background: var(--accent); }

/* ---- Tabs (underline) --------------------------------------------- */
.pw-tabs { display: flex; gap: var(--space-7); border-bottom: 1px solid var(--line); overflow-x: auto; }
.pw-tab {
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: 48px; padding: 0 var(--space-1);
  border: 0; border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--ink-2);
  font: 600 var(--text-md)/1 var(--font-body);
  white-space: nowrap;
  margin-bottom: -1px;
}
.pw-tab:hover { color: var(--ink); }
.pw-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--brand); }
.pw-tab__count {
  font-size: var(--text-xs); font-weight: 700;
  padding: 3px 8px; border-radius: var(--radius-pill);
  background: var(--surface-2); color: var(--ink-2);
}

/* ---- Segmented control -------------------------------------------- */
.pw-segmented {
  display: inline-flex;
  align-self: flex-start;
  flex-wrap: wrap; gap: var(--space-1);
  padding: var(--space-1);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
}
.pw-segmented__btn {
  height: 40px; padding: 0 var(--space-4);
  border: 0; border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-2);
  font: 600 var(--text-md)/1 var(--font-body);
}
.pw-segmented__btn:hover { color: var(--ink); }
.pw-segmented__btn[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }

/* ---- Keyboard hint ------------------------------------------------ */
.pw-kbd {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding: 3px 7px;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  color: var(--ink-3);
}

/* Status labels in tables and lists (RAG, recruitment bands, forecast, activity): always as
   wide as their text — some browsers (Safari) sized the pill before the icon and webfont
   settled, so long labels like "Well behind" ran past the edge. */
.pw-rag, .pw-band, .pw-fcpill, .pw-state {
  width: max-content; min-width: max-content; flex-shrink: 0;
  padding-right: 12px; line-height: 1.4;
}
.pw-rag > svg, .pw-band > svg, .pw-rag > .icon, .pw-band > .icon { flex: none; }