/* Chips, badges and tags, Arc-style (piece 15, 2026-10-29).
 *
 * Twenty pill styles did three different jobs. Each legacy class now does
 * one of them (Arc badge, chip-group, tag-input):
 *
 *   badge  status. 6px corners, 11px/500, a tone fill from the --arc-*-subtle
 *          tints with the tone's ink: neutral, info (accent), success,
 *          warning, danger. The status inks are drawn 28% toward the
 *          foreground so 11px text keeps 4.5:1 in dark, light and steel.
 *          Status colour only where something is status.
 *   chip   a filter you can turn on and off. A hairline at rest, a quiet
 *          hover, the selected chip filled with the accent tint. Chip rows
 *          that pick ONE value are segmented controls (group B's piece 6);
 *          the chips here are multi-select or standalone.
 *   tag    a label (#persona, $TICKER, a source, a theme). Quiet: no fill, a
 *          hairline, secondary ink; links answer the pointer with ink.
 *
 * New markup uses .oc-badge (+ --info/--success/--warning/--danger),
 * .oc-chip (aria-pressed / .is-on) and .oc-tag. The legacy mapping is
 * listed per family below. PM OS plate pages are out of scope (D7), the case
 * file among them (its stage and analyst marks are their own system), as are
 * the paper models and analysts pages, the chart toolbars (chart_kit), the
 * chat and Helm.
 *
 * !important only on properties the flat layer sets with it (.pill, .chip,
 * .cal-chip, .un-chip, .att-chip, .note-card__status, .st-badge).
 */

/* ======================================================================
   Badge
   ====================================================================== */
html:not(.page-pmos) body:is(body, #oc-arc):is(body, #oc-arc-2) :is(
  .oc-badge, .mc-pill, .mct-chip, .pf2-pill, .un-chip, .th-reg-badge, .att-chip, .tm-unread-badge,
  .note-card__status, .pill.pill--shared, .pill[class*="pill--priority"], .st-badge, .conf-badge) {
  --oc-badge-ink: var(--arc-text-secondary);
  --oc-badge-fill: var(--arc-surface-muted);
  --oc-badge-edge: var(--arc-border);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 20px;
  padding: 0 7px !important;
  border: 1px solid var(--oc-badge-edge) !important;
  border-radius: var(--arc-radius-chip) !important;
  background: var(--oc-badge-fill) !important;
  box-shadow: none !important;
  color: var(--oc-badge-ink) !important;
  font-size: var(--arc-text-2xs) !important;
  font-weight: var(--arc-weight-strong) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  line-height: 1.2;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
  transition: background-color var(--arc-dur) var(--arc-ease), border-color var(--arc-dur) var(--arc-ease), color var(--arc-dur) var(--arc-ease);
}
/* Tones */
html:not(.page-pmos) body:is(body, #oc-arc):is(body, #oc-arc-2) :is(
  .oc-badge--info, .pill.pill--shared, .tm-unread-badge) {
  --oc-badge-ink: var(--arc-accent-strong);
  --oc-badge-fill: var(--arc-accent-subtle);
  --oc-badge-edge: color-mix(in srgb, var(--arc-accent) 24%, var(--arc-border));
}
html:not(.page-pmos) body:is(body, #oc-arc):is(body, #oc-arc-2) :is(
  .oc-badge--success, .mc-pill--ok, .pf2-pill.is-ok, .conf-badge--high) {
  --oc-badge-ink: color-mix(in srgb, var(--arc-success) 72%, var(--arc-foreground));
  --oc-badge-fill: var(--arc-success-subtle);
  --oc-badge-edge: color-mix(in srgb, var(--arc-success) 25%, var(--arc-border));
}
html:not(.page-pmos) body:is(body, #oc-arc):is(body, #oc-arc-2) :is(
  .oc-badge--warning, .mct-chip.is-warn, .att-chip--warn, .conf-badge--med, .pill.pill--priority-2) {
  --oc-badge-ink: color-mix(in srgb, var(--arc-warning) 72%, var(--arc-foreground));
  --oc-badge-fill: var(--arc-warning-subtle);
  --oc-badge-edge: color-mix(in srgb, var(--arc-warning) 27%, var(--arc-border));
}
html:not(.page-pmos) body:is(body, #oc-arc):is(body, #oc-arc-2) :is(
  .oc-badge--danger, .mc-pill--bad, .pf2-pill.is-breach, .conf-badge--low, .pill.pill--priority-1) {
  --oc-badge-ink: color-mix(in srgb, var(--arc-danger) 72%, var(--arc-foreground));
  --oc-badge-fill: var(--arc-danger-subtle);
  --oc-badge-edge: color-mix(in srgb, var(--arc-danger) 26%, var(--arc-border));
}
/* A count badge is a number: round it to a pill so one digit stays round. */
html:not(.page-pmos) body:is(body, #oc-arc):is(body, #oc-arc-2) :is(.tm-unread-badge, .oc-badge--count) {
  min-width: 18px;
  min-height: 18px;
  justify-content: center;
  padding: 0 5px !important;
  border-radius: var(--arc-radius-pill) !important;
}
/* The label rises in when a badge's text changes (arc_numbers.js sets it). */
.oc-badge-rise { animation: oc-badge-rise var(--arc-dur) var(--arc-ease-enter) both; }
@keyframes oc-badge-rise {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: none; }
}

/* ======================================================================
   Chip (multi-select and standalone filters)
   ====================================================================== */
html:not(.page-pmos) body:is(body, #oc-arc):is(body, #oc-arc-2) :is(.oc-chip, .cal-chip, .sc-exch-chip) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--arc-control-sm);
  padding: 0 10px;
  border: 1px solid var(--arc-border) !important;
  border-radius: var(--arc-radius-control) !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--arc-text-secondary) !important;
  font-size: var(--arc-text-xs) !important;
  font-weight: var(--arc-weight-strong) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--arc-dur-fast) var(--arc-ease),
    border-color var(--arc-dur-fast) var(--arc-ease),
    color var(--arc-dur-fast) var(--arc-ease),
    transform var(--arc-dur) var(--arc-spring);
}
@media (hover: hover) and (pointer: fine) {
  html:not(.page-pmos) body:is(body, #oc-arc):is(body, #oc-arc-2) :is(.oc-chip, .cal-chip, .sc-exch-chip):hover {
    background: var(--arc-hover) !important;
    border-color: var(--arc-border-strong) !important;
    color: var(--arc-foreground) !important;
  }
}
html:not(.page-pmos) body:is(body, #oc-arc):is(body, #oc-arc-2) :is(.oc-chip, .cal-chip, .sc-exch-chip):active {
  transform: scale(.97);
}
html:not(.page-pmos) body:is(body, #oc-arc):is(body, #oc-arc-2) :is(.oc-chip, .cal-chip, .sc-exch-chip):is([aria-pressed="true"], [aria-selected="true"], .is-on, .is-active) {
  background: var(--arc-accent-subtle) !important;
  border-color: color-mix(in srgb, var(--arc-accent) 34%, var(--arc-border)) !important;
  color: var(--arc-foreground) !important;
}
html:not(.page-pmos) body:is(body, #oc-arc):is(body, #oc-arc-2) :is(.oc-chip, .cal-chip, .sc-exch-chip):focus-visible {
  outline: 2px solid var(--arc-focus);
  outline-offset: 2px;
}

/* ======================================================================
   Tag (labels)
   ====================================================================== */
html:not(.page-pmos) body:is(body, #oc-arc):is(body, #oc-arc-2) :is(
  .oc-tag, .pill.pill--tag, .pill.pill--ticker, .pill[class*="pill--source"], .pill.pill--theme,
  .dash-tl-entry .dash-tl-chip, .mem-tag-inline, .note-pipeline-chip, .af-chip) {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 18px;
  padding: 0 6px !important;
  border: 1px solid var(--arc-border) !important;
  border-radius: var(--arc-radius-chip) !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--arc-text-secondary) !important;
  font-size: var(--arc-text-2xs) !important;
  font-weight: var(--arc-weight) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--arc-dur-fast) var(--arc-ease), border-color var(--arc-dur-fast) var(--arc-ease);
}
/* A ticker reads in ink: it names a company, not a category. */
html:not(.page-pmos) body:is(body, #oc-arc):is(body, #oc-arc-2) :is(.pill.pill--ticker, .oc-tag--ticker) {
  color: var(--arc-foreground) !important;
  font-weight: var(--arc-weight-strong) !important;
  font-variant-numeric: tabular-nums;
}
@media (hover: hover) and (pointer: fine) {
  html:not(.page-pmos) body:is(body, #oc-arc):is(body, #oc-arc-2) :is(a.oc-tag, a.pill, a.note-pipeline-chip, button.oc-tag):hover {
    color: var(--arc-foreground) !important;
    border-color: var(--arc-border-strong) !important;
  }
}
html:not(.page-pmos) body:is(body, #oc-arc):is(body, #oc-arc-2) :is(a.oc-tag, a.pill, a.note-pipeline-chip, button.oc-tag):focus-visible {
  outline: 2px solid var(--arc-focus);
  outline-offset: 2px;
}
/* Press source and category labels already carry an icon and no frame;
   they stay frameless tags in secondary ink. */
html:not(.page-pmos) body:is(body, #oc-arc):is(body, #oc-arc-2) .press-tag {
  border: 0;
  background: transparent;
  color: var(--arc-text-secondary);
  font-size: var(--arc-text-xs);
  font-weight: var(--arc-weight);
  letter-spacing: 0;
  text-transform: none;
}
html:not(.page-pmos) body:is(body, #oc-arc):is(body, #oc-arc-2) .press-tag.press-tag--source {
  color: var(--arc-foreground);
  font-weight: var(--arc-weight-strong);
}

@media (prefers-reduced-motion: reduce) {
  html body :is(.oc-chip, .cal-chip, .sc-exch-chip) { transition: none; }
  html body :is(.oc-chip, .cal-chip, .sc-exch-chip):active { transform: none; }
  .oc-badge-rise { animation: none; }
}