/* ===================================================================
   TAG-CONFIDENCE — a pill reporting a quantized source-agreement level:
   n of 4 filled dots + a text label ("Confidence: High"). Single
   rendering mode only — a glyph/icon mode existed here briefly and was
   removed; if an icon-based tag is ever needed it'll be scoped and
   built as its own thing, not folded back into this component.

   Portable: pulls only from tokens.css, no dependency on field-guide.css.
   =================================================================== */

.tag-confidence {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3) var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  border: var(--border-width-hairline) solid var(--pill-color);
  font-family: var(--font-ui);
  font-size: var(--ui-caption-size);
  font-weight: var(--w-semibold);
  color: var(--color-ink);
  background: color-mix(in srgb, var(--pill-color) 10%, transparent);
}

/* inline-flex + align-items:center here (not just on .tag-confidence
   itself) is load-bearing, not decoration: .tag-confidence-indicator is
   a flex item of .tag-confidence, and flex items compute to block-level
   regardless of their written `display`. A plain block wrapping an
   inline-flex .tag-confidence-meter takes its height from the
   surrounding text's line box (here, ~14px from the 12px label font),
   not from the meter's real ~8px content height — leaving the dots
   vertically off-center by a couple of px against the label. Making
   the indicator flex itself removes that phantom line-box height
   entirely; it now sizes exactly to its one child. */
.tag-confidence-indicator {
  display: inline-flex;
  align-items: center;
}

.tag-confidence-meter {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.tag-confidence-dot {
  /* --space-1 (4px) read as too small in practice — bumped to
     --space-2 (8px), still an on-grid token, not a return to the
     hardcoded 6px this replaced two rounds ago. */
  width: var(--space-2);
  height: var(--space-2);
  border-radius: 50%;
  border: var(--border-width-hairline) solid var(--pill-color);
  background: transparent;
}

.tag-confidence-dot.is-filled {
  background: var(--pill-color);
}

/* Tier → color, from the reserved signal-color scale (see NAMING.md).
   High and Full both use .agreement — told apart by filled-dot count
   and label text, never color alone. */
.tag-confidence.agreement { --pill-color: var(--color-signal-positive); }
.tag-confidence.low-confidence { --pill-color: var(--color-signal-caution); }
.tag-confidence.conflict { --pill-color: var(--color-signal-negative); }

/* None — absence, not a low score. Dashed border carries that
   distinction even before the label is read. */
.tag-confidence.missing {
  --pill-color: var(--color-signal-absent);
  border-style: dashed;
}