@props([
    'label',
    'value',
    'unit' => null,
    'percent' => null,   // 0..100 → renders a bar
    'tone' => 'accent',  // accent | success | warning | danger
])
@php
    $bar = [
        'accent'  => 'bg-accent',
        'success' => 'bg-success',
        'warning' => 'bg-warning',
        'danger'  => 'bg-danger',
    ][$tone] ?? 'bg-accent';
    $pct = is_null($percent) ? null : max(0, min(100, (int) $percent));
@endphp
<div {{ $attributes->merge(['class' => 'rounded-lg border border-line bg-surface p-4 shadow-xs']) }}>
    <p class="text-xs font-semibold uppercase tracking-wide text-faint">{{ $label }}</p>
    <p class="mt-1 flex items-baseline gap-1">
        <span class="font-mono text-2xl font-semibold text-ink">{{ $value }}</span>
        @if ($unit)<span class="text-sm text-muted">{{ $unit }}</span>@endif
    </p>
    @if (! is_null($pct))
        <div class="mt-3 h-1.5 w-full overflow-hidden rounded-pill bg-surface-2">
            {{-- the one allowed inline style: dynamic progress width (R4) --}}
            <div class="h-full rounded-pill {{ $bar }}" style="width: {{ $pct }}%"></div>
        </div>
    @endif
</div>