/* ============================================================================
   POLY-REF — inline reference chip for a polymorphic object.
   Two-segment chip: small uppercase tracked type label with a leading icon,
   a hairline divider, then the object name.

   Markup is generated in Python, not templates:
   pbx/polymorphic/_polymorphic.py::AbstractPolymorphicModel._render_poly_ref
   emits .poly-ref (an <a> when the object has a detail URL, otherwise a
   <span>), .poly-ref-type, .poly-ref-icon, .poly-ref-name, and sets the
   per-object hue inline as style="--poly-ref-h: <hue>". Every colour is
   mixed here from that hue plus the theme's --poly-ref-* lightness/alpha
   rungs, so a new polymorphic type needs no CSS. The mixing has to happen
   in this file: a custom property is substituted on the element that
   declares it, and :root has no hue to substitute.

   Consolidated from theme-override.css (app layer). No vendor (theme.css) or
   bootstrap.min.css rules touch these selectors. Loaded after theme.css,
   Values are the resolved cascade result as of the
   consolidation — no intended visual change.
   ============================================================================ */

.poly-ref {
    --poly-ref-h: 220;
    display: inline-flex;
    align-items: stretch;
    max-width: 100%;
    border: 1px solid hsla(var(--poly-ref-h), var(--poly-ref-border-s),
        var(--poly-ref-border-l), var(--poly-ref-border-a));
    border-radius: 6px;
    overflow: hidden;
    line-height: 1;
    text-decoration: none;
    vertical-align: middle;
    transition: border-color 120ms ease, background 120ms ease;
}

/* Anchor-only: the <span> form is not interactive, so it gets no hover. */
a.poly-ref:hover {
    border-color: hsla(var(--poly-ref-h), 55%, var(--poly-ref-border-l), 0.8);
    background: hsla(var(--poly-ref-h), 55%, var(--poly-ref-border-l), 0.08);
    text-decoration: none;
}

a.poly-ref:hover .poly-ref-name {
    color: var(--poly-ref-name-fg-hover);
}

.poly-ref:focus-visible {
    outline: none;
    border-color: hsl(var(--poly-ref-h), 60%, var(--poly-ref-border-l));
    box-shadow: 0 0 0 0.15rem
        hsla(var(--poly-ref-h), 60%, var(--poly-ref-border-l), 0.28);
}

.poly-ref-type {
    flex-shrink: 0;
    padding: 4px 8px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: hsl(var(--poly-ref-h), 55%, var(--poly-ref-type-l));
    background: hsla(var(--poly-ref-h), 55%, 50%, var(--poly-ref-type-bg-a));
    border-right: 1px solid hsla(var(--poly-ref-h), var(--poly-ref-border-s),
        var(--poly-ref-border-l), var(--poly-ref-border-a));
    white-space: nowrap;
    align-self: center;
}

.poly-ref-icon {
    margin-right: 6px;
    font-size: 9px;
    opacity: 0.75;
}

.poly-ref-name {
    min-width: 0;
    padding: 4px 9px;
    font-size: 12px;
    font-weight: 500;
    color: var(--poly-ref-name-fg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    align-self: center;
}