/* ──────────────────────────────────────────────────────────────────────────
   Term cloud — the glossary tag cloud, a knowledge-base entry point
   ──────────────────────────────────────────────────────────────────────────
   A shared object (rendered by app/views/shared/_term_cloud.html.erb) listing
   the glossary terms in scope as a weighted tag cloud: each tag links to its
   /glossary/:slug entry and is sized by how often the term is mentioned. The
   weight is computed by the caller; the view buckets it into one of four
   discrete size tiers (--t1 … --t4) — no continuous font-size scale.

   Built first against the factor page (promoted off the page-scoped `.tr-terms`
   chip run), portable to the hub at every scope level and a candidate for the
   country profile and the /glossary index. */

.op-term-cloud {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2xs) var(--space-xs);
}

.op-term-cloud__item { display: inline; }

/* A single tag — a sunken editorial chip linking into the glossary. The hover
   affordance lifts it to the accent so the whole cloud reads as explorable. */
.op-term-cloud__tag {
  display: inline-block;
  padding: var(--space-3xs) var(--space-sm);
  background: var(--surface-sunken);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  font-family: var(--font-furniture);
  line-height: var(--leading-tight, 1.15);
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.12s ease, border-color 0.12s ease;
}
.op-term-cloud__tag:hover,
.op-term-cloud__tag:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
}

/* The four discrete size tiers: rarer terms read quietly, the most-mentioned
   terms anchor the cloud. Heavier tiers also gain weight, not just size. */
.op-term-cloud__tag--t1 { font-size: var(--text-xs); }
.op-term-cloud__tag--t2 { font-size: var(--text-sm); }
.op-term-cloud__tag--t3 {
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  color: var(--text);
}
.op-term-cloud__tag--t4 {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--text);
}