/* Intrinsic choice widths, bounded by the available screen space. */
select:not(.select2-hidden-accessible) {
    box-sizing: border-box;
    width: var(--choice-width, max-content) !important;
    max-width: 100%;
    min-width: 0;
}
select + .select2-container {
    width: var(--choice-width, 22rem) !important;
    max-width: 100%;
    min-width: 0;
}
.select2-container .select2-selection--single {
    height: auto;
    min-height: 32px;
}
.select2-container .select2-selection--single .select2-selection__rendered {
    white-space: normal;
    overflow-wrap: anywhere;
    text-overflow: clip;
    line-height: 1.6;
    padding-block: 4px;
    padding-right: 34px;
}
.select2-container .select2-selection--multiple .select2-selection__choice,
.select2-results__option {
    white-space: normal;
    overflow-wrap: anywhere;
    max-width: 100%;
    box-sizing: border-box;
}
.select2-dropdown { max-width: calc(100vw - 24px); }
.choice-full-text { display: block; font-size: .85em; margin-top: .35rem; overflow-wrap: anywhere; }
.choice-full-text[hidden] { display: none; }
/* Let a long choice occupy a full row instead of squeezing it into half a form. */
.row > .choice-field { flex: 1 1 var(--choice-width, 22rem); width: auto; max-width: 100%; min-width: 0; }
/* Keep related-object buttons usable when a field fills the row. */
.aligned .flex-container { flex-wrap: wrap; }
.aligned .related-widget-wrapper { max-width: 100%; min-width: 0; }
.aligned .selector { min-width: 0; max-width: 100%; flex-wrap: wrap; }
.aligned .selector-available, .aligned .selector-chosen {
    flex: 1 1 var(--choice-width, 24rem); min-width: 0; max-width: 100%;
}
.aligned .selector select { width: 100% !important; }
/* Filters now appear before search and results, in keyboard order as well. */
#changelist { display: block; }
#changelist #changelist-filter {
    display: flex; flex-wrap: wrap; gap: 1rem 1.25rem;
    box-sizing: border-box; width: 100%; margin: 0 0 1.25rem; padding: 0 1rem 1rem;
    position: static; border: 1px solid var(--hairline-color);
}
#changelist-filter h2 { flex: 0 0 100%; box-sizing: border-box; margin: 0 -1rem; padding: .75rem 1rem; width: calc(100% + 2rem); }
#changelist-filter #changelist-filter-extra-actions { flex: 0 0 100%; margin: 0; }
#changelist-filter .filter-field { display: block; max-width: 100%; min-width: 0; }
#changelist-filter .filter-field > span:first-child { display: block; margin-bottom: .4rem; font-weight: 600; }
#changelist-filter select { min-height: 2.25rem; }
#changelist .actions { box-sizing: border-box; }
#changelist .actions label { max-width: 100%; }
#changelist .actions select { height: auto; min-height: 2rem; margin: .25rem 0; }
@media (max-width: 767px) {
    .aligned .selector { flex-direction: column; }
    .aligned .selector-available, .aligned .selector-chosen { flex-basis: auto; width: 100%; }
    #changelist-filter .filter-field { width: 100%; }
}
.aligned .related-widget-wrapper { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.aligned .related-widget-wrapper > select,
.aligned .related-widget-wrapper > .select2-container { flex-shrink: 0; }
.aligned .related-widget-wrapper > .choice-full-text { flex-basis: 100%; }
#changelist-filter-extra-actions { display: flex; flex-wrap: wrap; gap: 1rem; }