/* ===================================================================
   TAG-SOURCE — shape + label identifying a record's data provenance:
   square = National, diamond = State/Province, circle = County/Local,
   hourglass = System-derived (computed by Field Guide, not reported by
   any source — not an agency, so it doesn't borrow one of their
   shapes). Shape carries tier only, never a specific agency. Color is
   assigned dynamically per source at query time via the --shape-color
   custom property, set inline per instance by the caller; falls back
   to a neutral ink tone when unset (e.g. colors.html's Data Provenance
   swatches below, which demonstrate shape/size only and never claim a
   color of their own).

   Portable: pulls only from tokens.css, no dependency on field-guide.css
   or any page chrome.

   Single canonical definition — previously duplicated independently in
   field-guide.css (for colors.html's own Data Provenance demo) and
   card-datapoint.css (so Card-datapoint could render source rows
   without depending on field-guide.css). The two copies had already
   drifted before this extraction reconciled them: field-guide.css's
   copy hardcoded a 2px border-radius and had no --shape-color hook
   (colors.html never needed per-instance color, so the rule never
   grew one), while card-datapoint.css's copy used the var(--radius-tag)
   token (3px) and supported per-instance color throughout. Because
   colors.html and component-sandbox.html load both stylesheets, with
   card-datapoint.css linked after field-guide.css, card-datapoint.css's
   rules were already winning the cascade on every page that loaded
   both — colors.html's swatches were silently rendering at 3px, not
   the 2px the old field-guide.css copy declared. This file adopts that
   already-winning version as canonical, so nothing changes visually
   for any page that had both stylesheets loaded; only field-guide.css's
   swatches (which never actually rendered with its own 2px rule due to
   the cascade above) now match their declared CSS, not just their
   rendered pixels.
   =================================================================== */

.tag-source {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-ui);
  font-size: var(--ui-body-sm-size);
  font-weight: var(--w-medium);
  color: var(--color-ink);
}

.tag-source-shape {
  box-sizing: border-box; /* stated explicitly rather than relying on a host page's global reset — this file is meant to stand alone */
  width: var(--space-3);
  height: var(--space-3);
  flex-shrink: 0;
  background: var(--shape-color, var(--color-ink-secondary));
}

.tag-source-shape.is-square { border-radius: var(--radius-tag); }
.tag-source-shape.is-circle { border-radius: 50%; }
.tag-source-shape.is-diamond { transform: rotate(45deg); border-radius: 1px; } /* fixed, not derived — sub-pixel crispness on a rotated shape, same reasoning as tokens.css's border-width literals */

/* Hourglass/bowtie — System-derived data: a value Field Guide computed
   or inferred, not one any source reported. Replaces an earlier open-
   arch attempt (two rounds: a border-based construction whose interior
   fully closed at any bold-enough stroke, then a mask-cutout rebuild
   whose hole had no curvature to work with) — both were solid-fill-
   with-fake-hole techniques, a whole bug class this shape sidesteps by
   being an actual solid fill: two triangles meeting at a center pinch
   point via a self-intersecting clip-path polygon, same "no borders, no
   interior negative space" category as square/diamond/circle above.

   clip-path can't round a polygon's vertices the way border-radius
   rounds a box, so the rounding happens one layer out: this element is
   the ROUNDED, overflow:hidden WRAPPER (border-radius matches
   .is-square's var(--radius-tag), not a new value), and ::before is the
   actual sharp-cornered bowtie, sized to fill it and clipped by the
   wrapper's rounded box. Only the four outer bounding corners round
   this way; the center pinch is real geometry (where the two triangles
   meet), not something rounding could reach even if it tried — that's
   structurally correct for an hourglass, not a limitation of this
   technique. No scaling math needed at a larger size (unlike the arch's
   stroke ratio): a solid fill just fills whatever box it's given —
   this is also why colors.html's oversized 28px/22px swatch demo below
   needs no separate override rule. */
.tag-source-shape.is-hourglass {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-tag);
  background: none; /* the base rule above fills every shape's box solid; left alone here it would paint straight through the ::before's clip-path gaps and hide the pinch entirely — the wrapper only rounds/clips, ::before does the actual fill */
}

.tag-source-shape.is-hourglass::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--shape-color, var(--color-ink-secondary));
  clip-path: polygon(0 0, 100% 0, 0 100%, 100% 100%);
}