<script setup lang="ts">
defineProps<{ label: string; value: string; tone?: 'ok' | 'warn' | 'bad' }>()
</script>

<template>
  <div class="cell">
    <div class="label">{{ label }}</div>
    <div class="value" :data-tone="tone">{{ value }}</div>
  </div>
</template>

<style scoped>
.cell { min-width: 0; }
.label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.value {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.value[data-tone='ok']   { color: var(--ok); }
.value[data-tone='warn'] { color: var(--warn); }
.value[data-tone='bad']  { color: var(--bad); }
</style>
