/* ============================================================
   Arcanium · Reusable content tags (shared)
   The small "trademark-style" pills used across modules. Promoted
   here from vasculitis.css (where they were defined inline) so any
   page can drop them in identically. Same tokens — NO visual change.

   Importance / curriculum tags (one family, one look):
     .auc-star   — AUC curriculum high-yield   (red filled   ★ AUC)
     .nbme-flag  — NBME board trap              (soft amber   ⚠ NBME)
     .hy-tag     — generic high-yield            (soft blue    ★ High-Yield)
     .yield-tag  — two-tier importance tag (sibling to NBME):
          .is-high  → "★ HIGH-YIELD"        (soft amber)
          .is-hyper → "★ HYPER HIGH-YIELD"  (filled amber — top tier; keep rare)

   Markup: <span class="X" tabindex="0" title="...">&#ICON; LABEL</span>
   Or render programmatically via shared/tags/tags.js (ArcaniumTags).
   ============================================================ */
.auc-star,
.nbme-flag,
.hy-tag,
.yield-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1.4;
    white-space: nowrap;
    vertical-align: middle;
    cursor: help;
}

.auc-star {
    background: #e5484d;
    color: #ffffff;
}
.auc-star:hover,
.auc-star:focus { background: #c1391a; outline: none; }

.nbme-flag {
    background: rgba(255, 149, 0, 0.16);
    color: #9a5d00;
    font-weight: 850;
}

.hy-tag {
    background: rgba(10, 132, 255, 0.12);
    color: var(--accent-strong);
}

/* Two-tier yield tag — tags HOW important content is (vs NBME = what kind).
   Amber family; hyper is filled so the top tier reads as rarer. */
.yield-tag.is-high {
    background: rgba(217, 119, 6, 0.15);
    color: #b45309;
}
.yield-tag.is-hyper {
    background: #b45309;
    color: #ffffff;
    letter-spacing: 0.05em;
}
.yield-tag.is-hyper:hover,
.yield-tag.is-hyper:focus { background: #934409; outline: none; }