/* Count badges on icons and avatars: one look everywhere.
 *  - bottom-right corner of the icon/avatar;
 *  - 4px vertical padding, numerals centred both ways (tabular figures);
 *  - a 3px ring in the colour of the container behind it, so the badge reads
 *    as cut out of the icon rather than pasted on (--badge-ring per container).
 * Loaded after every component stylesheet; the !important on placement beats
 * older per-component rules and inline styles. */
:root {
    --badge-bg: #ef4444;
    --badge-fg: #fff;
    --badge-ring: var(--bg-primary, #edf3fb);
    --header-solid: rgb(225, 237, 252);
}
[data-theme="dark"] { --header-solid: #170c29; }

header, .reactive-header { --badge-ring: var(--header-solid); }
.notification-item, .navbar-dropdown { --badge-ring: var(--card-bg, var(--bg-primary)); }

#notifications-btn > .badge,
#messages-btn > .badge,
#email-btn > .badge,
.reactive-header .icon-btn > .badge,
#oup-fab-badge,
.notification-stack-count {
    position: absolute !important;
    top: auto !important;
    left: auto !important;
    right: -5px !important;
    bottom: -3px !important;
    box-sizing: border-box !important;
    min-width: calc(1em + 14px) !important; /* 1em digits + 2*4px pad + 2*3px ring: round for one digit */
    height: auto !important;
    padding: 4px 5px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    font: 700 10.5px/1 system-ui, -apple-system, "Segoe UI", sans-serif !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0 !important;
    color: var(--badge-fg) !important;
    background: var(--badge-bg) !important;
    border: 3px solid var(--badge-ring) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    transform-origin: 50% 50%;
    pointer-events: none;
}
/* The FAB sits on the page: ring in the page colour. */
#oup-fab-badge { --badge-ring: var(--bg-primary, #edf3fb); right: -5px !important; bottom: -5px !important; }
/* Hidden states keep working. */
#notifications-btn > .badge.hidden, #messages-btn > .badge.hidden, #email-btn > .badge.hidden,
#notifications-btn > .badge[hidden], #messages-btn > .badge[hidden], #email-btn > .badge[hidden] { display: none !important; }
#oup-fab-badge[hidden] { display: none !important; }