/* Compact officials / catch-up filters. Linked from the page so it beats the head copy of cu-app.css.
   Surfaces use shell tokens. No hard-coded dark panel. */

html[data-cu-officials-view="catalog"] .cu-officials-hold[data-cu-rendered-view="deck"][data-cu-tab-explicit="0"] {
    visibility: hidden;
}

.cu-officials-hub {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    margin: 0 0 0.45rem;
}

.cu-officials-hub .cu-overflow.cu-hub-tabs {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

.cu-officials-catalog .cu-catalog-filters {
    margin-bottom: 0.65rem;
}

.cu-officials-catalog .cu-officials-bar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    min-width: 0;
    margin: 0;
}

.cu-officials-catalog .cu-officials-bar__desk {
    display: contents;
}

.cu-officials-catalog .cu-officials-bar__end {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
}

.cu-officials-catalog .cu-filter-field,
.cu-feed-stage .cu-catchup-filters .cu-filter-field {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    min-height: 44px;
    margin: 0;
    padding: 0 0.35rem 0 0.65rem;
    border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
    border-radius: 0.65rem;
    background: transparent;
    color: inherit;
    box-sizing: border-box;
}

.cu-officials-catalog .cu-filter-field__label,
.cu-feed-stage .cu-catchup-filters .cu-filter-field__label,
.cu-officials-catalog .cu-filter-search__label {
    flex: 0 0 auto;
    font-size: 0.75rem;
    font-weight: 650;
    line-height: 1;
    white-space: nowrap;
}

.cu-officials-catalog .cu-filter-field select,
.cu-feed-stage .cu-catchup-filters .cu-filter-field select {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: 9.5rem;
    min-height: 44px;
    margin: 0;
    padding: 0 0.15rem 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.82rem;
    line-height: 1.2;
    cursor: pointer;
    field-sizing: content;
}

.cu-shell[data-theme="light"] .cu-officials-catalog .cu-filter-field select,
.cu-shell[data-theme="light"] .cu-feed-stage .cu-catchup-filters .cu-filter-field select {
    color-scheme: light;
}

.cu-shell:not([data-theme="light"]) .cu-officials-catalog .cu-filter-field select,
.cu-shell:not([data-theme="light"]) .cu-feed-stage .cu-catchup-filters .cu-filter-field select {
    color-scheme: dark;
}

.cu-officials-catalog .cu-filter-field:focus-within,
.cu-feed-stage .cu-catchup-filters .cu-filter-field:focus-within,
.cu-officials-catalog .cu-filter-search:focus-within {
    outline: 2px solid var(--cu-teal-bright, #5eead4);
    outline-offset: 2px;
}

.cu-officials-catalog .cu-filter-field select:focus,
.cu-officials-catalog .cu-filter-field select:focus-visible,
.cu-feed-stage .cu-catchup-filters .cu-filter-field select:focus,
.cu-feed-stage .cu-catchup-filters .cu-filter-field select:focus-visible,
.cu-officials-catalog .cu-filter-search input:focus,
.cu-officials-catalog .cu-filter-search input:focus-visible {
    outline: none;
}

.cu-officials-catalog .cu-filter-search {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex: 1 1 8rem;
    min-width: 0;
    min-height: 44px;
    margin: 0;
    color: inherit;
}

.cu-officials-catalog .cu-filter-search .cu-send-input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: none;
    min-height: 44px;
    margin: 0;
}

.cu-officials-catalog .cu-filter-clear,
.cu-feed-stage .cu-catchup-filters .cu-filter-clear {
    appearance: none;
    flex: 0 0 auto;
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0 0.35rem;
    border: 0;
    background: transparent;
    color: var(--cu-teal-bright, var(--cu-teal, #0d9488));
    font: inherit;
    font-size: 0.82rem;
    font-weight: 650;
    line-height: 1;
    text-decoration: underline;
    text-underline-offset: 0.15em;
    white-space: nowrap;
    cursor: pointer;
}

.cu-officials-catalog .cu-filter-open {
    display: none;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0 0.7rem;
    border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
    border-radius: 0.65rem;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 650;
    line-height: 1;
    cursor: pointer;
    box-sizing: border-box;
}

.cu-officials-catalog .cu-filter-open[aria-pressed="true"] {
    box-shadow: inset 0 0 0 1px var(--cu-teal, #0d9488);
}

.cu-shell .cu-officials-catalog a.cu-filter-icon,
.cu-shell .cu-officials-hub a.cu-filter-icon,
.cu-officials-catalog button.cu-filter-icon,
.cu-officials-hub button.cu-filter-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0;
    border: 1.75px solid color-mix(in srgb, currentColor 55%, transparent);
    border-radius: 0.65rem;
    background: transparent;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
}

.cu-filter-icon__svg {
    display: block;
    width: 22px;
    height: 22px;
}

.cu-shell .cu-officials-catalog a.cu-filter-icon:hover,
.cu-shell .cu-officials-hub a.cu-filter-icon:hover,
.cu-officials-catalog button.cu-filter-icon:hover,
.cu-officials-hub button.cu-filter-icon:hover {
    background: color-mix(in srgb, currentColor 8%, transparent);
}

.cu-officials-catalog .cu-filter-open:focus-visible,
.cu-officials-catalog .cu-filter-clear:focus-visible,
.cu-feed-stage .cu-catchup-filters .cu-filter-clear:focus-visible,
.cu-shell .cu-officials-catalog a.cu-filter-icon:focus-visible,
.cu-shell .cu-officials-hub a.cu-filter-icon:focus-visible,
.cu-officials-catalog button.cu-filter-icon:focus-visible,
.cu-officials-hub button.cu-filter-icon:focus-visible,
.cu-officials-catalog .cu-filter-close:focus-visible {
    outline: 2px solid var(--cu-teal-bright, #5eead4);
    outline-offset: 2px;
}

.cu-officials-catalog .cu-filter-scrim {
    position: fixed;
    inset: 0;
    z-index: 40;
    margin: 0;
    padding: 0;
    border: 0;
    background: color-mix(in srgb, CanvasText 32%, transparent);
    cursor: pointer;
}

.cu-officials-catalog .cu-filter-sheet {
    position: fixed;
    z-index: 41;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    max-height: min(80dvh, 32rem);
    margin: 0;
    padding: 0.85rem 0.85rem calc(0.85rem + env(safe-area-inset-bottom, 0px));
    overflow: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--cu-card-elevated-border, color-mix(in srgb, currentColor 16%, transparent));
    border-radius: 0.9rem 0.9rem 0 0;
    background: var(--cu-card-elevated-bg, Canvas);
    color: inherit;
    box-shadow: 0 -8px 28px color-mix(in srgb, CanvasText 18%, transparent);
    box-sizing: border-box;
}

.cu-officials-catalog .cu-filter-sheet__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 44px;
}

.cu-officials-catalog .cu-filter-sheet__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
}

.cu-officials-catalog .cu-filter-close {
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0 0.75rem;
    border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
    border-radius: 0.65rem;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 650;
    cursor: pointer;
}

.cu-officials-catalog .cu-filter-sheet .cu-filter-field {
    width: 100%;
}

.cu-officials-catalog .cu-filter-sheet .cu-filter-field select {
    max-width: none;
    width: 100%;
    field-sizing: fixed;
}

.cu-feed-stage .cu-catchup-filters {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    margin: 0 0 0.55rem;
}

.cu-feed-stage .cu-catchup-filters .cu-filter-field {
    flex: 1 1 0;
}

.cu-feed-stage .cu-catchup-filters .cu-filter-field select {
    max-width: none;
    width: 100%;
    field-sizing: fixed;
}

@media (max-width: 767.98px) {
    .cu-officials-catalog .cu-officials-bar__desk {
        display: none;
    }

    .cu-officials-catalog .cu-filter-open {
        display: inline-flex;
    }

    .cu-officials-catalog .cu-filter-search__label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}

@media (min-width: 768px) {
    .cu-officials-catalog .cu-officials-bar {
        flex-wrap: nowrap;
    }

    .cu-officials-catalog .cu-filter-sheet,
    .cu-officials-catalog .cu-filter-scrim {
        display: none !important;
    }
}

/* Same one-row bar as officials, for pages that are not the catalog. */
.cu-compact-filters {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    min-width: 0;
    margin: 0 0 0.85rem;
    color: inherit;
}

.cu-send-official-tools .cu-compact-filters {
    margin: 0;
}

.cu-compact-filters__desk,
.cu-compact-filters .cu-filter-field-set {
    display: contents;
}

.cu-compact-filters__trail {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}

.cu-compact-filters .cu-filter-field {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    min-height: 44px;
    margin: 0;
    padding: 0 0.35rem 0 0.65rem;
    border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
    border-radius: 0.65rem;
    background: transparent;
    color: inherit;
    box-sizing: border-box;
}

.cu-compact-filters .cu-filter-field__label,
.cu-compact-filters .cu-filter-search__label {
    flex: 0 0 auto;
    font-size: 0.75rem;
    font-weight: 650;
    line-height: 1;
    white-space: nowrap;
}

.cu-compact-filters .cu-filter-field select {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: 14rem;
    min-height: 44px;
    margin: 0;
    padding: 0 0.15rem 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.82rem;
    line-height: 1.2;
    cursor: pointer;
    field-sizing: content;
}

.cu-shell[data-theme="light"] .cu-compact-filters .cu-filter-field select {
    color-scheme: light;
}

.cu-shell:not([data-theme="light"]) .cu-compact-filters .cu-filter-field select {
    color-scheme: dark;
}

.cu-compact-filters .cu-filter-field:focus-within,
.cu-compact-filters .cu-filter-search:focus-within {
    outline: 2px solid var(--cu-teal-bright, #5eead4);
    outline-offset: 2px;
}

.cu-compact-filters .cu-filter-field select:focus,
.cu-compact-filters .cu-filter-field select:focus-visible,
.cu-compact-filters .cu-filter-search input:focus,
.cu-compact-filters .cu-filter-search input:focus-visible {
    outline: none;
}

.cu-compact-filters .cu-filter-search {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex: 1 1 8rem;
    min-width: 0;
    min-height: 44px;
    margin: 0;
    color: inherit;
}

.cu-compact-filters .cu-filter-search .cu-send-input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: none;
    min-height: 44px;
    margin: 0;
}

.cu-compact-filters .cu-filter-clear {
    appearance: none;
    flex: 0 0 auto;
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0 0.35rem;
    border: 0;
    background: transparent;
    color: var(--cu-teal-bright, var(--cu-teal, #0d9488));
    font: inherit;
    font-size: 0.82rem;
    font-weight: 650;
    line-height: 1;
    text-decoration: underline;
    text-underline-offset: 0.15em;
    white-space: nowrap;
    cursor: pointer;
}

.cu-compact-filters .cu-filter-open {
    display: none;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0 0.7rem;
    border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
    border-radius: 0.65rem;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 650;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    box-sizing: border-box;
}

.cu-compact-filters .cu-filter-open[aria-pressed="true"] {
    box-shadow: inset 0 0 0 1px var(--cu-teal, #0d9488);
}

.cu-compact-filters .cu-filter-open:focus-visible,
.cu-compact-filters .cu-filter-clear:focus-visible,
.cu-compact-filters .cu-filter-close:focus-visible {
    outline: 2px solid var(--cu-teal-bright, #5eead4);
    outline-offset: 2px;
}

.cu-compact-filters ~ .cu-filter-scrim,
.cu-filter-scrim {
    position: fixed;
    inset: 0;
    z-index: 40;
    margin: 0;
    padding: 0;
    border: 0;
    background: color-mix(in srgb, CanvasText 32%, transparent);
    cursor: pointer;
}

.cu-compact-filters ~ .cu-filter-sheet,
.cu-filter-sheet {
    position: fixed;
    z-index: 41;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    max-height: min(80dvh, 32rem);
    margin: 0;
    padding: 0.85rem 0.85rem calc(0.85rem + env(safe-area-inset-bottom, 0px));
    overflow: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--cu-card-elevated-border, color-mix(in srgb, currentColor 16%, transparent));
    border-radius: 0.9rem 0.9rem 0 0;
    background: var(--cu-card-elevated-bg, Canvas);
    color: inherit;
    box-shadow: 0 -8px 28px color-mix(in srgb, CanvasText 18%, transparent);
    box-sizing: border-box;
}

.cu-filter-sheet__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 44px;
}

.cu-filter-sheet__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
}

.cu-compact-filters ~ .cu-filter-close,
.cu-filter-sheet .cu-filter-close {
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0 0.75rem;
    border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
    border-radius: 0.65rem;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 650;
    cursor: pointer;
}

.cu-filter-sheet .cu-filter-field {
    width: 100%;
}

.cu-filter-sheet .cu-filter-field select {
    max-width: none;
    width: 100%;
    field-sizing: fixed;
}

@media (max-width: 767.98px) {
    .cu-compact-filters .cu-compact-filters__desk {
        display: none;
    }

    .cu-compact-filters .cu-filter-open {
        display: inline-flex;
    }

    .cu-compact-filters .cu-filter-search__label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}

@media (min-width: 768px) {
    .cu-compact-filters ~ .cu-filter-sheet,
    .cu-compact-filters ~ .cu-filter-scrim {
        display: none !important;
    }
}