<script setup>
// Schmaler Fortschrittsbalken (0–1) mit Beschriftung und optionalem Hinweis.
defineProps({
  value: { type: Number, default: 0 },   // 0..1
  label: { type: String, default: '' },
  hint: { type: String, default: '' },   // z. B. „Umfang wächst noch"
})
</script>

<template>
  <div class="pb">
    <div class="pb-track">
      <div class="pb-fill" :style="{ width: Math.round(Math.min(1, Math.max(0, value)) * 100) + '%' }"></div>
    </div>
    <span v-if="label" class="pb-label">{{ label }}</span>
    <span v-if="hint" class="pb-hint">{{ hint }}</span>
  </div>
</template>

<style scoped>
.pb { display: flex; align-items: center; gap: 0.5rem; }
.pb-track { flex: 1; height: 6px; border-radius: 999px; background: var(--panel-soft); overflow: hidden; }
.pb-fill { height: 100%; background: var(--accent); border-radius: 999px; transition: width 0.4s ease; }
.pb-label { font-size: 0.78rem; color: var(--text-muted); white-space: nowrap; }
.pb-hint { font-size: 0.74rem; color: var(--text-faint); white-space: nowrap; }
</style>
