/*
 * badges.css — Data-class badge components
 * Visual indicators showing the origin/reliability of every displayed number.
 * Uses tokens from tokens.css. Import tokens.css before this file.
 * Component spec: atidaryta_component_spec_v1.md §7
 * Usage: <span class="dc-badge" data-class="real|computed|ai|predicted" aria-label="..."></span>
 */

.dc-badge {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-left: 4px;
  vertical-align: middle;
  color: var(--dataclass-color);
  flex-shrink: 0;
}

/* REAL — solid filled circle. Scraped data. */
.dc-badge[data-class="real"] {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--dataclass-color);
}

/* COMPUTED — upward triangle. Derived from real data. */
.dc-badge[data-class="computed"] {
  width: 0;
  height: 0;
  background: none;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 9px solid var(--dataclass-color);
}

/* AI-DERIVED — hexagon. Claude API output. */
.dc-badge[data-class="ai"] {
  width: 10px;
  height: 10px;
  background-color: var(--dataclass-color);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  border-radius: 0;
}

/* PREDICTED — hatched clock shape. Anticipated/scheduled data. */
/* Clock outline via border-radius circle + hatch via repeating-linear-gradient */
.dc-badge[data-class="predicted"] {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid var(--dataclass-color);
  background-color: transparent;
  background-image: repeating-linear-gradient(
    45deg,
    var(--dataclass-color) 0px,
    var(--dataclass-color) 1px,
    transparent 1px,
    transparent 3px
  );
  box-sizing: border-box;
}

/* ============================================================
   METHOD LINK — "?" inline anchor next to computed numbers
   Subtle superscript-style affordance. Never competes with data.
   Usage: <a class="method-link" href="/methodology.html#anchor">?</a>
   ============================================================ */

.method-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: 3px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  color: var(--text-faint);
  font-family: Inter, system-ui, sans-serif;
  font-size: 9px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.method-link:hover {
  border-color: var(--text-secondary);
  color: var(--text-secondary);
}