// ─────────────────────────────────────────────────────────────────────────────
// Component: Clones  (.cl-* visuals)
// File: src/scss/components/_clones.scss
//
// VISUAL RULES ONLY — no layout or sizing here.
// Structural layout lives in pages/_clones.scss.
// ─────────────────────────────────────────────────────────────────────────────

// ── Stat chips ────────────────────────────────────────────────────────────────

.cl-stat {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}

.cl-stat__val {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
}

.cl-stat__lbl {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-muted);
}

// ── Tier badge ────────────────────────────────────────────────────────────────

.cl-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.15em 0.55em;
  border-radius: 3px;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.cl-badge--exact {
  background: color-mix(in srgb, var(--color-accent) 18%, transparent);
  color: var(--color-accent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 35%, transparent);
}

.cl-badge--near {
  background: color-mix(in srgb, var(--color-warning) 18%, transparent);
  color: var(--color-warning);
  border: 1px solid color-mix(in srgb, var(--color-warning) 35%, transparent);
}

// ── Cross-file badge ──────────────────────────────────────────────────────────

.cl-cross-file {
  font-size: 0.62rem;
  color: var(--color-warning);
  opacity: 0.85;
}

// ── File hotspots ─────────────────────────────────────────────────────────────

.cl-hotspot-section-title {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-muted);
}

.cl-hotspot-row:hover { background: var(--bg-overlay); }

.cl-hotspot-file {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--fg-default);
}

.cl-hotspot-track { background: var(--bg-overlay); }
.cl-hotspot-fill  { background: var(--color-warning); opacity: 0.7; }

.cl-hotspot-val {
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--fg-muted);
}

// ── Cluster list ──────────────────────────────────────────────────────────────

.cl-list {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.cl-row {
  border-bottom: 1px solid var(--border-subtle);
  color: var(--fg-default);
  transition: background 0.1s;

  &:last-child { border-bottom: none; }
  &:hover { background: var(--bg-overlay); }
}

.cl-row__hash {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--fg-muted);
}

.cl-row__bar-track { background: var(--bg-overlay); }
.cl-row__bar-fill--exact { background: var(--color-accent);  opacity: 0.7; }
.cl-row__bar-fill--near  { background: var(--color-warning); opacity: 0.7; }

.cl-row__count {
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  color: var(--fg-default);
  font-weight: 500;
}

// ── Language + kind pills ─────────────────────────────────────────────────────

.cl-lang-pill {
  font-size: 0.62rem;
  padding: 0.1em 0.45em;
  border-radius: 3px;
  background: color-mix(in srgb, var(--color-teal) 15%, transparent);
  color: var(--color-teal);
  white-space: nowrap;
}

.cl-kind-badge {
  font-size: 0.62rem;
  padding: 0.1em 0.4em;
  border-radius: 3px;
  background: var(--bg-overlay);
  color: var(--fg-muted);
  text-transform: lowercase;
  white-space: nowrap;
}

// ── Detail page ───────────────────────────────────────────────────────────────

.cl-detail-hash {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: var(--fg-muted);
  margin-bottom: 0.25rem;
}

.cl-detail-meta {
  font-size: 0.8rem;
  color: var(--fg-muted);
}

.cl-detail-chip {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  min-width: 80px;
}

.cl-detail-chip__val {
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--fg-default);
  font-variant-numeric: tabular-nums;

  &--accent { color: var(--color-accent); }
  &--warn   { color: var(--color-warning); }
}

.cl-detail-chip__lbl {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-muted);
}

.cl-section-title {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-muted);
}

// ── Member list ───────────────────────────────────────────────────────────────

.cl-member-list {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.cl-member-row {
  border-bottom: 1px solid var(--border-subtle);

  &:last-child { border-bottom: none; }
  &:hover { background: var(--bg-overlay); }
}

.cl-member-addr {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--fg-default);
}

// ── File breakdown ────────────────────────────────────────────────────────────

.cl-file-breakdown {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
  padding: 0.5rem 0;
}

.cl-file-row:hover { background: var(--bg-overlay); }

.cl-file-name {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--fg-default);
}

.cl-file-track { background: var(--bg-overlay); }
.cl-file-fill  { background: var(--color-accent); opacity: 0.5; }

.cl-file-count {
  font-size: 0.75rem;
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}

// ── Empty state ───────────────────────────────────────────────────────────────

.cl-empty { color: var(--fg-muted); }