/* css/visibility.css — P2-06. Score badge, band colours, factor rows. */

.viz-score {
  display: inline-flex;
  align-items: baseline;
  gap: 0.375rem;
  font-family: var(--mono);
}
.viz-score__num { font-size: 1.375rem; font-weight: 700; }
.viz-score__band {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.viz--excellent { color: #4cd7d0; }
.viz--good      { color: #57cc7a; }
.viz--fair      { color: #d9c86b; }
.viz--poor      { color: #e69a5c; }
.viz--blown     { color: #e66a74; }

.viz-factors {
  list-style: none;
  margin: 0.375rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  font-size: 0.75rem;
}
.viz-factor {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.125rem 0;
  border-bottom: 1px dotted color-mix(in srgb, var(--line) 60%, transparent);
}
.viz-factor__label { flex: 1 1 auto; min-width: 0; }
.viz-factor__value { color: var(--text-dim); font-family: var(--mono); font-size: 0.6875rem; }
.viz-factor__delta {
  flex: 0 0 auto;
  min-width: 2.25rem;
  text-align: right;
  font-family: var(--mono);
  font-weight: 600;
}
.viz-factor__delta--zero { color: var(--text-dim); }
.viz-factor__delta--pen  { color: var(--warn); }
.viz-factor__delta--hard { color: var(--bad); }
.viz-factor--unavailable .viz-factor__label { color: var(--text-dim); font-style: italic; }