/* The instrument table and the standing indicator.
   Colour is reinforcement only, never the carrier: every bar states its own
   number, and every chip carries its label as text. A reader who cannot
   distinguish the fill from the track loses nothing. */

.intensity th.det { white-space: nowrap; }

.ibar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 8rem;
}

.ibar-fill {
  display: block;
  height: 0.55rem;
  min-width: 2px;
  border-radius: 999px;
  background: var(--accent, currentColor);
  opacity: 0.55;
  flex: 0 0 auto;
}

.ibar-num {
  font-variant-numeric: tabular-nums;
  font-size: 0.85em;
  white-space: nowrap;
  opacity: 0.85;
}

/* The dial. No target mark: there is no correct value for this number, and
   drawing a target would invent one. */
.dial-block {
  margin: 2rem 0 2.5rem;
}

.dial {
  display: block;
  width: 100%;
  height: auto;
  max-width: 46rem;
}

.dial-track { fill: currentColor; opacity: 0.12; }
.dial-fill { fill: var(--accent, currentColor); opacity: 0.65; }

.dial-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.75rem;
  margin-top: 0.85rem;
  font-size: 0.95rem;
}

.dial-legend b { font-variant-numeric: tabular-nums; }

/* Answerability, stated beneath a chart or table.
   It is deliberately quiet. It is a caveat on a number, not a headline of its
   own, and a loud version would compete with the figure it qualifies. */
.answerability-note {
  display: block;
  margin: 0.6rem 0 0;
  padding: 0.5rem 0.7rem;
  border-left: 3px solid currentColor;
  font-size: 0.9rem;
  line-height: 1.45;
  opacity: 0.85;
}

.answerability-note b { font-variant-numeric: tabular-nums; }

.answerability-note[data-state="LARGELY UNANSWERABLE"] { opacity: 1; }

.answerability-note .aw-bar {
  display: inline-block;
  vertical-align: middle;
  width: 5rem;
  height: 0.5rem;
  margin: 0 0.4rem;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.15;
  position: relative;
}

.answerability-note .aw-bar i {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.9;
}

.restatement { margin: 0 0 2rem; }

@media (max-width: 640px) {
  .ibar { min-width: 6rem; }
  .dial-legend { gap: 0.35rem 1rem; }
}