/*
 * Elements sidebar: the findings on the selected element, on paper.
 *
 * Tokens and the severity language are in ../shared/kinpaku.css. The pane is
 * narrow, so the language is carried by two small pieces: the kind label
 * (the detector's gold tag for an AI tell, a quiet gray chip for a quality
 * issue) and the detail line in patina-deep mono.
 */

body {
  padding: 10px 12px 14px;
  font-size: var(--ks-type-label);
}

/* Empty and no-findings states */

.state {
  padding: 3px 0;
  font-size: var(--ks-type-label);
  color: var(--ks-text-muted);
}

.state strong {
  color: var(--ks-ink);
  font-weight: 600;
}

/* Findings */

.finding + .finding {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--ks-rule);
}

.finding-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
}

.finding-name {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--ks-type-label);
  font-weight: 600;
  color: var(--ks-ink);
}

/* The slop marker: gold, and the only gold glyph in the pane. */
.finding-name .marker {
  color: var(--ks-kinpaku-rich);
  font-size: 10px;
  line-height: 1;
}

/* AI tell: the detector's tag. Quality: a quiet chip. */
.finding-kind {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  min-height: 15px;
  padding: 0 5px;
  border-radius: var(--ks-radius-sm);
  background: var(--ks-gray);
  color: var(--ks-text-muted);
  font-family: var(--ks-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}

.finding-kind.is-slop {
  background: var(--ks-kinpaku);
  color: var(--ks-on-gold);
}

.finding-detail {
  margin-bottom: 5px;
  font-family: var(--ks-mono);
  font-size: var(--ks-type-micro);
  color: var(--ks-patina-deep);
}

.finding-description {
  font-size: var(--ks-type-micro);
  line-height: 1.5;
  color: var(--ks-text-muted);
}