.amen-picker {
    --amen-blue: #2563eb;
    --amen-blue-dark: #1d4ed8;
    --amen-blue-soft: #eff6ff;
    --amen-blue-soft-2: #dbeafe;
    --amen-blue-line: rgba(37, 99, 235, .32);
    --amen-row: 30px;

    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.amen-picker[hidden] { display: none; }


.amen-picker-legend {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--amen-blue-dark);
}
.amen-picker-legend .pf-legend-meta { font-weight: 600; }

.amen-picker-legend-box {
    padding: 8px 10px 10px;
    border: 1px solid rgba(37, 99, 235, .45);
    border-radius: 12px;
    background: #f4f9ff;
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .07);
}

.amen-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 5px 6px;
    min-width: 0;
}


.amen-group { position: relative; min-width: 0; }

.amen-chip-group {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 280px;
    height: var(--amen-row);
    padding: 0 11px;
    border: 1px solid var(--amen-blue-line);
    border-radius: 999px;
    background: var(--amen-blue-soft);
    color: var(--amen-blue-dark);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.amen-chip-group:hover { border-color: var(--amen-blue); background: var(--amen-blue-soft-2); }
.amen-chip-group:focus-visible { outline: 2px solid var(--amen-blue); outline-offset: 2px; }
.amen-chip-group.is-on {
    background: var(--amen-blue);
    border-color: var(--amen-blue);
    color: #fff;
}
.amen-chip-group .amen-chip-text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.amen-caret {
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-inline-end: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    opacity: .75;
    transform: rotate(45deg) translateY(-2px);
    transition: transform .15s ease;
}
.amen-chip-group[aria-expanded="true"] .amen-caret { transform: rotate(225deg) translateY(-1px); }


.amen-menu {
    position: absolute;
    z-index: 90;
    inset-block-start: calc(100% + 6px);
    inset-inline-start: 0;
    display: grid;
    align-content: start;
    gap: 1px;
    min-width: 210px;
    max-height: calc(var(--amen-row) * 5 + 12px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 5px;
    border: 1px solid var(--amen-blue-line);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .18);
}
.amen-menu[hidden] { display: none; }

.amen-option {
    display: flex;
    align-items: center;
    gap: 8px;
    height: var(--amen-row);
    padding: 0 8px;
    border-radius: 8px;
    color: #0f172a;
    font-size: 12.5px;
    cursor: pointer;
    white-space: nowrap;
}
.amen-option:hover { background: var(--amen-blue-soft); }
.amen-option input { flex: 0 0 auto; width: 15px; height: 15px; margin: 0; accent-color: var(--amen-blue); }
.amen-option > span { overflow: hidden; text-overflow: ellipsis; }
.amen-option:has(input:checked) {
    background: var(--amen-blue-soft-2);
    color: var(--amen-blue-dark);
    font-weight: 600;
}
.amen-option .amen-default-badge {
    margin-inline-start: auto;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--amen-blue-soft-2);
    color: var(--amen-blue-dark);
    font-size: 10px;
    font-weight: 600;
}


.amen-chip-flat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: var(--amen-row);
    max-width: 260px;
    padding: 0 11px;
    border: 1px solid rgba(148, 163, 184, .55);
    border-radius: 999px;
    background: #fff;
    color: #334155;
    font-size: 12.5px;
    cursor: pointer;
    user-select: none;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.amen-chip-flat:hover { border-color: var(--amen-blue); color: var(--amen-blue-dark); background: var(--amen-blue-soft); }
.amen-chip-flat input { flex: 0 0 auto; width: 15px; height: 15px; margin: 0; accent-color: var(--amen-blue); }
.amen-chip-flat > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.amen-chip-flat:has(input:checked) {
    background: var(--amen-blue);
    border-color: var(--amen-blue);
    color: #fff;
    font-weight: 600;
}
.amen-chip-flat:has(input:checked) input { accent-color: #fff; }

.amen-picker-empty {
    margin: 0;
    font-size: 12.5px;
    color: var(--muted, #64748b);
}


@media (max-width: 900px) {
    .amen-picker { --amen-row: 44px; }
    .amen-chip-group,
    .amen-chip-flat {
        height: 44px;
        max-width: none;
        padding: 0 14px;
        font-size: 13.5px;
        border-radius: 12px;
    }
    .amen-menu {
        min-width: min(280px, calc(100vw - 40px));
        border-radius: 12px;
    }
    .amen-option { font-size: 13.5px; border-radius: 10px; }
    .amen-option input,
    .amen-chip-flat input { width: 18px; height: 18px; }
    .amen-caret { width: 8px; height: 8px; }
}