@props(['label', 'value', 'note' => null, 'tone' => null])

{{-- tone: "loss" marks a negative result; it pairs red ink with the minus sign, never color alone. --}}
<div {{ $attributes->class('card p-4') }}>
    <div class="text-sm text-stone-600">{{ $label }}</div>
    <div @class(['mt-1 text-xl font-semibold tracking-tight whitespace-nowrap sm:text-2xl', 'text-red-700' => $tone === 'loss', 'text-stone-900' => $tone !== 'loss'])>{{ $value }}</div>
    @if ($note)
        <div class="mt-1 text-xs text-stone-500">{{ $note }}</div>
    @endif
    {{ $slot }}
</div>