/* ============================================================================
 * zen/components/label/label.css
 * ----------------------------------------------------------------------------
 * Floating label pinned to a Bézier path or a world point. Used to annotate
 * traffic on a flow — e.g. `SAML` on the user→IdP arc, `mTLS` on proxy→auth.
 *
 * HTML:
 *   <div class="zen-label zen-label--cyan"
 *        data-at="40% 55%" data-i18n="labels.saml">SAML</div>
 *
 * Positioning is handled by `zen.anchor.*` + `zen.layout.applyAnchors` (via
 * `data-at` in percent coordinates) OR by your animation loop (setting
 * `style.left/top`). The component itself doesn't know where it is.
 *
 * Legacy alias: `.o-label` (same classes, same color variants).
 * ============================================================================ */

.zen-label, .o-label {
    position: absolute;
    transform: translate(-50%, -50%);
    background: rgba(13, 17, 23, 0.85);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 0.8rem;
    color: var(--white);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s var(--ease-natural);
    z-index: 3;
}

.zen-label.show, .o-label.show { opacity: 1; }

/* Color variants — BEM modifiers + legacy bare-color classes --------------- */
.zen-label--cyan,   .zen-label[data-role="proxy"],
.o-label.cyan       { border-color: var(--cyan);   color: var(--cyan); }

.zen-label--green,  .zen-label[data-role="auth"],
.o-label.green      { border-color: var(--green);  color: var(--green); }

.zen-label--violet, .zen-label[data-role="idp"],
.o-label.violet     { border-color: var(--violet); color: var(--violet); }

.zen-label--orange, .zen-label[data-role="agent"],
.o-label.orange     { border-color: var(--orange); color: var(--orange); }

.zen-label--yellow, .zen-label[data-role="secret"],
.o-label.yellow     { border-color: var(--yellow); color: var(--yellow); }

.zen-label--blue,   .zen-label[data-role="wds"], .zen-label[data-role="gpo"],
.o-label.blue       { border-color: var(--blue);   color: var(--blue); }

.zen-label--red,
.o-label.red        { border-color: var(--red);    color: var(--red); }

.zen-label--pink,   .zen-label[data-role="user"],
.o-label.pink       { border-color: var(--pink);   color: var(--pink); }

/* Variants --------------------------------------------------------------- */
.zen-label--compact { padding: 2px 6px; font-size: 0.7rem; }

/* Chip — sits ON the Bézier path (not above it), solid background (matches
 * scene) so it visually cuts the line underneath. Use for protocol labels
 * that should feel "embedded" in the arrow rather than floating. */
.zen-label--chip {
    background: var(--bg);
    padding: 3px 10px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    z-index: 4;              /* above the canvas (z-index 1) */
}