.wol-icon-picker { min-width: 0; font-size: 1rem; }
.wol-icon-picker .wip-summary { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.wol-icon-picker .wip-preview { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; font-size: 1.5rem; border: 1px solid #d5dfe7; border-radius: .25rem; }
.wol-icon-picker .wip-value { overflow-wrap: anywhere; min-width: 0; flex: 1 1 8rem; }
.wol-icon-picker .wip-panel { padding: .75rem 0; }
.wol-icon-picker .wip-filters { min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: .75rem; margin-bottom: .5rem; }
.wol-icon-picker .wip-filters > .form-control { box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; margin: 0; }
.wol-icon-picker input,.wol-icon-picker select,.wol-icon-picker .btn { font-size: 1rem; }
.wol-icon-picker .wip-results { display: grid; grid-template-columns: repeat(auto-fill,minmax(6.25rem,1fr)); gap: .375rem; max-height: 18rem; grid-auto-rows: max-content; overflow-y: auto; padding: .25rem; }
.wol-icon-picker .wip-choice { box-sizing: border-box; display: grid; grid-template-rows: auto auto; justify-items: center; align-content: start; align-items: start; height: auto; min-width: 0; gap: .375rem; padding: .625rem .375rem; min-height: 5rem; white-space: normal; overflow-wrap: anywhere; }
.wol-icon-picker .wip-choice i { display: block; font-size: 1.5rem; line-height: 1.25; }
.wol-icon-picker .wip-choice span { display: block; min-width: 0; max-width: 100%; font-size: .875rem; line-height: 1.4; white-space: normal; overflow-wrap: anywhere; }
.wol-icon-picker .wip-choice[aria-pressed=true] { background: #e7f2fc; border-color: #327dc0; }
.wol-icon-picker .wip-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .5rem; }
.wol-icon-picker .wip-status,.wol-icon-picker .wip-custom summary { font-size: .875rem; color: #586879; }
.wol-icon-picker .wip-custom summary { cursor: pointer; margin: .5rem 0; }
.wol-icon-picker .wip-custom input { width: 100%; }
.wol-icon-picker [hidden] { display: none !important; }
@media(max-width:600px) { .wol-icon-picker .wip-filters { grid-template-columns: minmax(0,1fr); } }

/* Opt-in top-layer chooser: unaffected by scrolling/clipping in the owner form. */
.wol-icon-picker dialog.wip-popup {
    position: fixed;
    inset: 0;
    margin: auto;
    width: min(56rem, calc(100vw - 2rem));
    height: min(44rem, calc(100vh - 2rem));
    height: min(44rem, calc(100dvh - 2rem));
    max-width: none;
    max-height: none;
    padding: 1.25rem;
    border: 1px solid #c6d1de;
    border-radius: .5rem;
    background: #fff;
    color: #263746;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, .25);
    overflow: hidden;
}
.wol-icon-picker dialog.wip-popup[open] { display: flex; flex-direction: column; gap: .75rem; }
.wol-icon-picker dialog.wip-popup::backdrop { background: rgba(20, 35, 50, .5); }
.wol-icon-picker .wip-popup-titlebar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex: 0 0 auto; }
.wol-icon-picker .wip-popup-titlebar h2 { font-size: 1.25rem; font-weight: 600; margin: 0; }
.wol-icon-picker .wip-popup .wip-filters { flex: 0 0 auto; margin: 0; }
.wol-icon-picker .wip-popup .wip-choice { height: auto; min-height: 6rem; }
.wol-icon-picker .wip-popup .wip-results { flex: 1 1 auto; min-height: 0; max-height: none; align-content: start; grid-auto-rows: max-content; overscroll-behavior: contain; }
.wol-icon-picker .wip-popup .wip-pagination { flex: 0 0 auto; margin: 0; gap: .5rem; }
.wol-icon-picker .wip-popup .wip-custom { flex: 0 0 auto; }
.wol-icon-picker .wip-popup .wip-status { flex: 1 1 12rem; text-align: center; }
.wol-icon-picker .wip-popup .btn:focus-visible { outline: 2px solid #327dc0; outline-offset: 2px; }
@media(max-width:600px) {
    .wol-icon-picker dialog.wip-popup { width: calc(100vw - 1rem); height: calc(100vh - 1rem); height: calc(100dvh - 1rem); padding: 1rem; }
    .wol-icon-picker .wip-popup .wip-pagination .wip-status { order: 3; flex-basis: 100%; }
}