/* global-value-pill — the platform's one numeric value badge.

   A gradient pill that carries a number the user cares about: a pay amount, a
   payout, a total. It is deliberately NOT .global-chip. A chip is a static
   label (a skill, a role, a key:value tag); this is a value — it is heavier,
   it is colored, and it can be clicked. Nick approved keeping it as its own
   element rather than folding it into the chip.

   Colors come from --global-value-pill-start / --global-value-pill-end /
   --global-value-pill-fg (defined in tokens.css so an org can override the
   pill without touching this file). Tokens only here — no raw hex, no raw
   radius, no raw shadow (ADR-124 / ADR-125).

     <span class="global-value-pill">$250</span>
     <button class="global-value-pill global-value-pill--interactive">$250</button>
     <button class="global-value-pill global-value-pill--interactive
                    global-value-pill--unset">Set pay</button>

   Callers add only spacing for their own layout; the box metrics live here. */

.global-value-pill {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-md);
    background: linear-gradient(
        180deg,
        var(--global-value-pill-start),
        var(--global-value-pill-end)
    );
    color: var(--global-value-pill-fg);
    font-weight: 700;
    font-size: var(--font-size-md);
    line-height: 1.25;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    box-shadow: var(--global-value-pill-shadow);
    vertical-align: middle;
}

/* --interactive — the pill is a control (click to open the bill drawer, click
   to edit pay). It must not carry the browser's button chrome, only the pill
   look, plus a quiet hover and a clear focus ring. */
.global-value-pill--interactive {
    border: none;
    cursor: pointer;
    font-family: inherit;
}

.global-value-pill--interactive:hover,
.global-value-pill--interactive:focus-visible {
    filter: brightness(1.05);
}

.global-value-pill--interactive:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 1px;
}

/* --unset — there is no value yet. It reads as a quiet dashed outline rather
   than a filled pill, because there is no amount to show. */
.global-value-pill--unset {
    background: none;
    color: var(--color-text-muted);
    border: 1px dashed var(--color-border);
    box-shadow: none;
    font-weight: var(--font-weight-medium);
}

.global-value-pill--unset.global-value-pill--interactive:hover,
.global-value-pill--unset.global-value-pill--interactive:focus-visible {
    color: var(--color-text);
    border-color: var(--color-text-muted);
    filter: none;
}