/* Frontmatter pills rendered directly under a page's H1 — see
   GitLabWikiFrontmatterBadges.php. One row, wrapping on narrow screens, so a
   page can carry several version facts without pushing the text down. */
.wiki-fm-badges {
    display: flex;
    flex-wrap: wrap;
    gap: calc(0.4 * var(--behnke-basic));
    align-items: center;
    margin: calc(-0.4 * var(--behnke-basic)) 0 calc(1.1 * var(--behnke-basic));
}

.wiki-fm-badge {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4em;
    padding: calc(0.14 * var(--behnke-basic)) calc(0.6 * var(--behnke-basic));
    border: 1px solid #dcdfe4;
    border-radius: 999px;
    background-color: #f3f4f6;
    color: #4b5563;
    font-size: 0.76rem;
    line-height: 1.6;
    white-space: nowrap;
}

.wiki-fm-badge-label {
    font-weight: 600;
    letter-spacing: 0.01em;
}

.wiki-fm-badge-value {
    font-variant-numeric: tabular-nums;
}

/* The station's own version gets the brand colour so it reads as the primary
   fact of the row, ahead of any product-specific pills next to it. */
.wiki-fm-badge--version {
    border-color: color-mix(in srgb, var(--behnke-design, #0066cc) 35%, #ffffff);
    background-color: color-mix(in srgb, var(--behnke-design, #0066cc) 8%, #ffffff);
    color: var(--behnke-design, #0066cc);
}

/* Page trails the current firmware release. Amber rather than red: the content
   is not wrong, it is unverified against the newest version. */
.wiki-fm-badge--outdated {
    border-color: #e3b341;
    background-color: #fdf6e3;
    color: #8a6100;
}

.wiki-fm-badge-note {
    padding-left: 0.45em;
    border-left: 1px solid currentColor;
    opacity: 0.75;
    font-size: 0.95em;
}

/* Browsers without color-mix() fall back to the neutral pill above, which is
   still legible — so no @supports fallback is needed for the value itself. */

@media print {
    .wiki-fm-badge {
        border-color: #999;
        background-color: transparent;
        color: #333;
    }
    .wiki-fm-badge--version,
    .wiki-fm-badge--outdated {
        border-color: #999;
        background-color: transparent;
        color: #333;
    }
}