/* Filtered-results flag — the IDEA-085 "this list is currently filtered" marker (helpdesk #5273),
   emitted by the FilterFlag widget from one of two hosts: FilterBar's action row, or the
   {summary}/{empty} line of a grid on a page with no filter bar. The pill itself is
   .w5-badge--filtered (components/badges.css); this file is the wrapper that seats it and the
   clear link beside it. See docs/css-refactoring.md §8. */
.w5-filter-flag {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-left: .5rem;
}

/* The way back to the unfiltered list. A real text link, not an icon-only control: it carries its
   own accessible name and inherits the global :focus-visible ring from app.css. Never suppress
   that ring here — the flag's whole point is that it is reachable. */
.w5-filter-flag__clear {
    font-size: .75rem;
    font-weight: 600;
    color: var(--gray-700);
    text-decoration: underline;
}

.w5-filter-flag__clear:hover,
.w5-filter-flag__clear:focus {
    color: var(--gray-900);
}

/* Inside FilterBar's action row the flag is a flex item among the buttons: the row's own gap does
   the spacing, and it centres against the button height rather than sitting on their baseline. */
.w5-filter-flag--bar {
    margin-left: .25rem;
    align-self: center;
}

/* Mobile: the summary line and the action row both wrap to full width, so the flag drops onto its
   own line and the left inset would read as a stray indent. */
@media (max-width: 767.98px) {
    .w5-filter-flag {
        margin-left: 0;
    }
}