/* ============================================================================
   components/badges.css  --  small status pills.

   Usage in .qmd (see _badges/*.qmd, meant to be {{< include >}}d):
     ::: {.review-badge .gold}
     Verified by two experts
     :::

   On a reference page the badge is a link (<a class="review-badge gold">) to the
   explanation of the labels in reference/preface/.

   Review tiers:  .unreviewed  .bronze  .silver  .gold
   `.status-badge` and its `.draft` tier are the same pill under an older
   name; both spellings are kept so existing content keeps working.
   ==========================================================================*/

.review-badge,
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.25em 0.75em;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

/* the status dot */
.review-badge::before,
.status-badge::before {
    content: "";
    width: 0.55em;
    height: 0.55em;
    border-radius: 50%;
    background: currentColor;
    display: inline-block;
}

.review-badge p,
.status-badge p {
    margin: 0;
}

/* tiers */
.review-badge.unreviewed,
.status-badge.draft {
    background: #fbe0dd;
    color: #a13d2e;
}

.review-badge.bronze,
.status-badge.bronze {
    background: #f1e0d1;
    color: #8a5a2c;
}

.review-badge.silver,
.status-badge.silver {
    background: #e6e8ea;
    color: #5b6672;
}

.review-badge.gold,
.status-badge.gold {
    background: #fbf0d0;
    color: #8a6d1e;
}

/* the badge on a reference page is a link to the explanation of the labels */
a.review-badge {
    text-decoration: none;
}

a.review-badge:hover,
a.review-badge:focus-visible {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* the table of levels in the reference preface (_generated/review-tiers.md) */
.review-tiers table {
    width: 100%;
}

.review-tiers td:first-child {
    white-space: nowrap;
    vertical-align: top;
}

.review-tiers .review-badge {
    margin-bottom: 0;
}