/* The metric pill rules from dx-a.css, unchanged, for the map layout (b-results.html), which does not load dx-a.css. Keep both copies in step. */
.oh-metric-pill{display:inline-flex;flex-wrap:wrap;align-items:center;gap:5px 7px;padding:5px 8px;border-radius:999px;background:var(--quiet);color:var(--ink);font-size:12px;line-height:1.4;vertical-align:middle}
.oh-metric-pill svg{width:14px;height:14px;flex:none;color:var(--dim)}
.oh-metric-pill b{font-variant-numeric:tabular-nums;font-size:13px;font-weight:650}
.oh-metric-pill>span{font-size:11px;color:var(--dim)}
@media(max-width:640px){.oh-metric-pill{border-radius:12px}}
.oh-metric-pill{white-space:normal;min-width:0}
.oh-metric-pill:is([data-comparison=lower],[data-comparison=favourable]){background:var(--g-bg);color:var(--g-ink)}
.oh-metric-pill:is([data-comparison=higher],[data-comparison=unfavourable]){background:var(--red-bg,#fee2e2);color:var(--red-ink,#b91c1c)}
.oh-metric-pill[data-comparison=none]{background:var(--ink2);color:#fff}
.oh-metric-pill:is([data-comparison=lower],[data-comparison=higher],[data-comparison=favourable],[data-comparison=unfavourable],[data-comparison=none]) :is(b,span,svg){color:inherit}
.oh-metric-pill.is-compact{flex-wrap:nowrap;width:max-content;max-width:100%;border-radius:999px;gap:5px;padding:5px 8px;white-space:nowrap}
.oh-metric-pill.is-compact>span{white-space:nowrap;font-size:11px}
.oh-metric-pill.is-compact:focus-visible{outline:2px solid var(--g-ink);outline-offset:3px}
/* A reported zero with a neutral publisher verdict keeps the neutral pill; graphite is reserved for no verdict. */
.oh-metric-pill[data-neutral-zero]:focus-visible{outline-color:var(--g-ink)}
.oh-metric-pill.is-compact b{display:inline;font-size:13px;line-height:1.4;letter-spacing:normal}
.oh-metric-short{display:none}