/**
 * Numeric count badges: unread notifications, messages, email, chats.
 *
 * The digits must sit on the badge's vertical centre. Before, each badge got
 * its height from whichever rule won the cascade: padding plus a line-height
 * (styles.css, reactive-interface.css), a fixed line-height inside a
 * different fixed height (styles.css: 14px in 16px), or a flex box that
 * reactive-ui-polish.css re-padded. Measured in Chromium, the digits sat up
 * to 2.6px off centre (the navbar counts 2px high, the side menu 2.6px low).
 *
 * Centring the font's line box is not enough: with line-height 1 the box
 * holds Inter's ascender and descender space, which is not symmetric around
 * the digits, so they still ride high. Where text-box is supported
 * (Chromium 133+, Safari 18.2+) the badge is a block whose single line is
 * trimmed to the digits' own extent (cap height to baseline, exactly 1cap),
 * and padding of (height - 1cap) / 2 puts that extent on the centre. Other
 * browsers get flex centring of the line box, which is close.
 *
 * Each badge keeps the height it rendered at before (--count-badge-h) and
 * its vertical border (--count-badge-border: the generic .badge rule in
 * reactive-ui-polish.css draws 1px); the padding subtracts that border.
 * Loaded after every other stylesheet; hidden badges (.hidden, [hidden], an
 * empty .unread-badge, inline display:none from JS) stay hidden.
 */

.icon-btn .badge:not(.hidden):not([hidden]),
.messenger-float-btn .badge:not(.hidden):not([hidden]),
.chat-unread-badge:not(.hidden):not([hidden]),
.cr-notif-badge:not(.hidden):not([hidden]) {
    --count-badge-h: 18px;
}

.icon-btn .badge:not(.hidden):not([hidden]),
.messenger-float-btn .badge:not(.hidden):not([hidden]) {
    --count-badge-border: 1px;
}

.notification-badge:not(.hidden):not([hidden]) {
    --count-badge-h: 24px; /* its circle in reactive-ui-polish.css */
}

.unread-badge:not(:empty):not(.hidden):not([hidden]) {
    --count-badge-h: 1.6em;
}

.side-menu-badge:not(.hidden):not([hidden]) {
    --count-badge-h: 2em;
}

.icon-btn .badge:not(.hidden):not([hidden]),
.notification-badge:not(.hidden):not([hidden]),
.unread-badge:not(:empty):not(.hidden):not([hidden]),
.side-menu-badge:not(.hidden):not([hidden]),
.messenger-float-btn .badge:not(.hidden):not([hidden]),
.chat-unread-badge:not(.hidden):not([hidden]),
.cr-notif-badge:not(.hidden):not([hidden]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-block-width: var(--count-badge-border, 0px);
    height: var(--count-badge-h);
    min-width: var(--count-badge-h);
    padding-block: 0;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

@supports (text-box: trim-both cap alphabetic) and (height: 1cap) {
    .icon-btn .badge:not(.hidden):not([hidden]),
    .notification-badge:not(.hidden):not([hidden]),
    .unread-badge:not(:empty):not(.hidden):not([hidden]),
    .side-menu-badge:not(.hidden):not([hidden]),
    .messenger-float-btn .badge:not(.hidden):not([hidden]),
    .chat-unread-badge:not(.hidden):not([hidden]),
    .cr-notif-badge:not(.hidden):not([hidden]) {
        display: inline-block;
        text-box: trim-both cap alphabetic;
        padding-block: calc((var(--count-badge-h) - 1cap) / 2 - var(--count-badge-border, 0px));
    }
}