/*
 * Dark utility bar (#topnav: LIVE CHAT / BOOKMARK US / new-messages / Users /
 * Issues / Admin / LOGOUT) on phones. Loaded after the base mobile layer.
 *
 * The base layer flexes the row but stretches each cell (flex:1 1 auto), so a
 * few items became big half-width columns while the rest stacked. Lay them out
 * as a centered, wrapping row of compact tappable chips instead.
 */
@media screen and (max-width: 820px) {
    #topnav > tbody > tr {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 2px 4px;
    }

    /* Size each item to its content and let the row wrap, rather than stretching
       a handful of cells across the whole width. */
    #topnav > tbody > tr > td {
        flex: 0 1 auto !important;
        width: auto !important;
        border-right: 0 !important;
    }

    /* Keep the thin separators as subtle dividers between chips. */
    #topnav > tbody > tr > td:not(:has(a)) {
        display: inline-block !important;
        opacity: 0.4;
        padding: 0 2px !important;
    }

    #topnav td a {
        display: inline-block !important;
        padding: 9px 11px !important;
        font-size: 12px !important;
        line-height: 1 !important;
        white-space: nowrap;
    }
}