/* ============================================================================
   BADGES — the app's single tag component.
   One shape/fill/label treatment with orthogonal modifiers that all compose:
     hue    .badge-{primary|success|…}   17 hues, one shared palette
     shape  .badge-pill                  fully rounded ends (default: 6px rect)
     size   .badge-sm                    line-height-neutral small size
     font   .badge-code                  monospace, for code-like values
     state  .badge-hover                 clickable affordance
   The palette is driven by custom properties: each hue sets --tag-rgb (an
   r,g,b triplet) and --tag-fg (label colour); one shared rule derives the
   tint fill, hairline border, and label from them.
   ============================================================================ */

.badge {
    --badge-bg: transparent;
    --badge-border: var(--border-normal);
    /* Neutral hue for hover fills on un-hued badges. */
    --tag-rgb: var(--color-gray-rgb);
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.65rem;
    margin: 0;
    min-height: 24px;
    height: fit-content;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    /* Baseline, not middle: an inline-flex box baseline-aligns on its own
       label's text baseline, so the badge text sits on the same baseline
       as the surrounding sentence — and the box, extending symmetrically
       around a font smaller than the body's, stays inside the line box
       instead of growing it. */
    vertical-align: baseline;
    border-radius: 6px;
    border: 1px solid var(--badge-border);
    background: var(--badge-bg);
    color: var(--badge-fg, var(--text-secondary));
}

/* Bootstrap's own .badge-pill sits earlier in the cascade, so the .badge
   radius above would win the equal-specificity tie without this. */
.badge-pill {
    border-radius: 999px;
}

/* Small size: total height (font + padding + border = 19px) stays under
   the 14px body's 21px line box, so badges sit inline with text and inside
   dense table rows without stretching the line height (middle alignment
   can grow the badge's own line by ~1px — imperceptible, and only that
   line). */
.badge-sm {
    padding: 2px 8px;
    min-height: 0;
    font-size: 0.75rem;
}

/* Monospace, for code-like values: extensions, SIP URIs, hostnames. */
.badge-code {
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
}

/* ---------------------------- SHARED PALETTE -----------------------------
   --tag-rgb is the hue as an r,g,b triplet; --tag-fg its label colour.
   Both resolve per-theme in tokens.css. */

.badge-primary   { --tag-rgb: var(--bs-primary-rgb);   --tag-fg: var(--bs-primary); }
.badge-secondary { --tag-rgb: var(--bs-secondary-rgb); --tag-fg: var(--bs-secondary); }
.badge-success   { --tag-rgb: var(--bs-success-rgb);   --tag-fg: var(--bs-success); }
.badge-info      { --tag-rgb: var(--bs-info-rgb);      --tag-fg: var(--bs-info); }
.badge-warning   { --tag-rgb: var(--bs-warning-rgb);   --tag-fg: var(--bs-warning); }
.badge-danger    { --tag-rgb: var(--bs-danger-rgb);    --tag-fg: var(--bs-danger); }
.badge-light     { --tag-rgb: var(--bs-light-rgb);     --tag-fg: var(--tag-light-fg); }
.badge-dark      { --tag-rgb: var(--bs-dark-rgb);      --tag-fg: var(--bs-dark-fg); }
.badge-gold      { --tag-rgb: 255, 193, 7;   --tag-fg: #d39e00; }
.badge-yellow    { --tag-rgb: 234, 179, 8;   --tag-fg: #ca8a04; }
.badge-teal      { --tag-rgb: 20, 184, 166;  --tag-fg: #0d9488; }
.badge-pink      { --tag-rgb: var(--color-pink-rgb); --tag-fg: var(--color-pink); }
.badge-rose      { --tag-rgb: 244, 63, 94;   --tag-fg: var(--color-rose); }
.badge-lime      { --tag-rgb: 132, 204, 22;  --tag-fg: var(--color-lime); }
.badge-indigo    { --tag-rgb: 99, 102, 241;  --tag-fg: var(--color-indigo); }
.badge-cyan      { --tag-rgb: 6, 182, 212;   --tag-fg: var(--color-cyan); }
.badge-brown     { --tag-rgb: 180, 120, 70;  --tag-fg: var(--color-brown); }

/* ------------------------------ TINT RULE --------------------------------
   Every hue at every size: a soft same-hue fill, a hairline same-hue edge,
   and the label at full hue strength. --tag-fg resolves per-theme in
   tokens.css, so no theme selector is needed here. */

.badge-primary, .badge-secondary, .badge-success, .badge-info, .badge-warning,
.badge-danger, .badge-light, .badge-gold, .badge-yellow, .badge-teal,
.badge-pink, .badge-rose, .badge-lime, .badge-indigo, .badge-cyan,
.badge-brown {
    --badge-bg: rgba(var(--tag-rgb), var(--badge-bg-alpha, 0.15));
    --badge-border: rgba(var(--tag-rgb), var(--badge-border-alpha, 0.18));
    /* --tag-label-lift resolves per-theme in tokens.css: labels lift
       toward white on dark (raw hues read dull as small text there), and
       stay the raw hue on light. */
    --badge-fg: color-mix(in srgb, #fff var(--tag-label-lift), var(--tag-fg));
}

/* `dark` is the one hue that is a well rather than a tint: it paints the
   shared --bs-dark-well (lifted above the card on dark, softened toward
   slate on light — see tokens.css) with the well's hairline edge. Declared
   after the tint rule, which would otherwise derive its fill and border
   from --tag-rgb. */
.badge-dark {
    --badge-bg: var(--bs-dark-well);
    --badge-border: var(--btn-dark-border);
    --badge-fg: var(--bs-dark-fg);
    /* Hover would otherwise dissolve the solid well into a translucent
       tint via the shared hover formula. */
    --badge-hover-bg-alpha: 1;
}

/* ------------------------------- HOVER -----------------------------------
   Opt-in clickable affordance: the fill deepens on hover. Neutral badges
   fill with the gray hue the base rule declares. */
.badge-hover {
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease,
                color 0.15s ease;
}
.badge-hover:hover {
    --badge-bg: rgba(var(--tag-rgb), var(--badge-hover-bg-alpha, 0.26));
}