/* ============================================================
   primae-glossary.css — capability tags that explain themselves.
   Each tag shows its acronym AND a plain-English gloss inline,
   so nobody has to already know the jargon; hover/focus/tap
   opens the full one-sentence definition.
   ============================================================ */

.pgl-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    font-family: var(--font-mono, monospace);
    border: 1px solid color-mix(in srgb, var(--accent, #d9542b) 26%, var(--color-border, #e0ddd1));
    background: var(--accent-soft, rgba(217, 84, 43, 0.10));
    border-radius: var(--radius-full, 999px);
    padding: 6px 13px;
    cursor: help;
    text-align: left;
    transition: border-color .18s, background-color .18s, transform .18s;
}
.pgl-chip:hover,
.pgl-chip[aria-expanded="true"] {
    border-color: var(--accent, #d9542b);
    background: color-mix(in srgb, var(--accent, #d9542b) 15%, transparent);
}
.pgl-chip:focus-visible { outline: 2px solid var(--accent, #d9542b); outline-offset: 2px; }

.pgl-k {
    font-size: 13px;
    font-weight: 500;
    color: var(--accent, #d9542b);
    white-space: nowrap;
}
.pgl-g {
    font-size: 12px;
    color: var(--color-muted, #6c6b61);
    white-space: nowrap;
}
.pgl-g::before { content: "· "; opacity: .55; }

/* ---- the definition popover ---------------------------------- */
.pgl-pop {
    position: absolute;
    z-index: 60;
    max-width: 340px;
    background: var(--color-text, #1a1a17);
    color: var(--color-bg, #f5f4ef);
    border-radius: var(--radius-lg, 10px);
    padding: 14px 16px;
    box-shadow: 0 18px 40px -18px rgba(26, 26, 23, 0.55);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .16s, transform .16s;
    pointer-events: none;
}
.pgl-pop.pgl-on { opacity: 1; transform: none; }

.pgl-pop-k {
    display: block;
    font-family: var(--font-mono, monospace);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #f0a186;
    margin-bottom: 7px;
}
.pgl-pop-d {
    display: block;
    font-size: 15px;
    line-height: 1.55;
}

@media (prefers-reduced-motion: reduce) {
    .pgl-chip, .pgl-pop { transition: none; }
}

@media (max-width: 560px) {
    .pgl-chip { padding: 6px 11px; gap: 6px; }
    .pgl-pop { max-width: calc(100vw - 32px); }
}