/* A label whose own background is the meter: the darker tone runs to
   --fill, the lighter tone takes the rest, and the value sits at the far
   end. One line where a meter under a row takes two. */
.fill-bar {
  --fill-bar-done: var(--accent-fill);
  --fill-bar-left: var(--accent-soft);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 1.5rem;
  padding: 0 var(--space-2);
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--fill-bar-done) var(--fill, 0%),
    var(--fill-bar-left) var(--fill, 0%)
  );
  color: var(--ink);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: var(--leading-tight);
}

.fill-bar-good {
  --fill-bar-done: var(--good-fill);
  --fill-bar-left: var(--good-soft);
  color: var(--good-ink);
}

.fill-bar-caution {
  --fill-bar-done: var(--caution-fill);
  --fill-bar-left: var(--caution-soft);
  color: var(--caution-ink);
}

.fill-bar-danger {
  --fill-bar-done: var(--danger-fill);
  --fill-bar-left: var(--danger-soft);
  color: var(--danger-ink);
}

/* The top fatigue level only (Very High). The filled part carries the
   severe token; the unfilled rest stays danger rather than a softer tint,
   so the label and value text (one colour, --ink-on-accent) stay legible
   across both parts of the bar. */
.fill-bar-severe {
  --fill-bar-done: var(--severe);
  --fill-bar-left: var(--danger);
  color: var(--ink-on-accent);
}

.fill-bar-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fill-bar-value {
  flex-shrink: 0;
  font-weight: 600;
  white-space: nowrap;
}

.fill-bar-list {
  display: grid;
  gap: var(--space-1);
}