How to override this single selector within a CSS ruleset (Firefox web browser user interface)?

Firefox 89 includes many changes to the web browser's UI.

One of the benefits of the new UI is that tabs can show a secondary information row to indicate, for example, if media is playing in a tab.

Unfortunately, when the highly-desirable compact mode is used, these secondary info rows disappear.

I went through the Firefox source code, and determined that this issue is created by this line of CSS code:

:root[uidensity="compact"] .tab-secondary-label, .tab-secondary-label:not([soundplaying], [muted], [activemedia-blocked], [pictureinpicture]), .tab-secondary-label:not([activemedia-blocked]) > .tab-icon-sound-blocked-label, .tab-secondary-label[muted][activemedia-blocked] > .tab-icon-sound-blocked-label, .tab-secondary-label[activemedia-blocked] > .tab-icon-sound-playing-label, .tab-secondary-label[muted] > .tab-icon-sound-playing-label, .tab-secondary-label[pictureinpicture] > .tab-icon-sound-playing-label, .tab-secondary-label[pictureinpicture] > .tab-icon-sound-muted-label, .tab-secondary-label:not([pictureinpicture]) > .tab-icon-sound-pip-label, .tab-secondary-label:not([muted]) > .tab-icon-sound-muted-label, .tab-secondary-label:not([showtooltip]) > .tab-icon-sound-tooltip-label, .tab-secondary-label[showtooltip] > .tab-icon-sound-label:not(.tab-icon-sound-tooltip-label) {
    display: none;
}

As you can see, the selector :root[uidensity="compact"] .tab-secondary-label at the beginning of this ruleset is causing this issue.

I would like to add to the userChrome.css overlay a CSS ruleset to overcome this issue, but I'm not exactly sure how. Yes, I could just change this ruleset in the Firefox source code, and recompile the browser, but I would prefer not to go through that hassle for every Firefox update.

Within userChrome.css, for obvious reasons, something like:

:root[uidensity="compact"] .tab-secondary-label {
    display: revert !important;
}

or

:root[uidensity="compact"] .tab-secondary-label {
    display: unset !important;
}

will not quite work.

What is a good CSS technique to use to accomplish this goal?

I figured out a solution.

I don't love it, but it does work.

.tab-secondary-label {
    display: -moz-box !important;
}

.tab-secondary-label:not([soundplaying], [muted], [activemedia-blocked], [pictureinpicture]), .tab-secondary-label:not([activemedia-blocked]) > .tab-icon-sound-blocked-label, .tab-secondary-label[muted][activemedia-blocked] > .tab-icon-sound-blocked-label, .tab-secondary-label[activemedia-blocked] > .tab-icon-sound-playing-label, .tab-secondary-label[muted] > .tab-icon-sound-playing-label, .tab-secondary-label[pictureinpicture] > .tab-icon-sound-playing-label, .tab-secondary-label[pictureinpicture] > .tab-icon-sound-muted-label, .tab-secondary-label:not([pictureinpicture]) > .tab-icon-sound-pip-label, .tab-secondary-label:not([muted]) > .tab-icon-sound-muted-label, .tab-secondary-label:not([showtooltip]) > .tab-icon-sound-tooltip-label, .tab-secondary-label[showtooltip] > .tab-icon-sound-label:not(.tab-icon-sound-tooltip-label) {
    display: none !important;
}

If anyone can propose different techniques, I'm interested in reading your answer(s).