.choice {
    border-radius: 1rem;
    background: #00000088;
    color: #ffffffCC;
    margin: 0;
    padding: 0vw 1vw 0vw 1vw;
    font-size: 0.9rem;
    user-select: none;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    /* align horizontal */
    align-items: center;
    /* align vertical */
    min-height: 2rem;
    gap: 0.25rem;
    flex-direction: row;
    width: inherit;
    white-space: nowrap;
}

#explore-filters .choice{
    border-radius: 3px;
    display: flex;
    justify-content: space-between;
}

.choice.selected {
    background: #dd8800;
    color: white;
    /* transition: background 300ms, color 300ms; */
}

.choice-set {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    gap: 2px;
    padding: 6px 6px 3px;
    /*background: #dddddd;*/
    overflow-x: scroll;
    min-height: 30px;
    justify-content: space-between;
    /* 2026-05-29 Pixel-7 audit: the last chip in this scroller used to
       hard-cut mid-word (e.g. "Tr…" for "Transportation") with no
       visual hint that the strip is scrollable. Fade the right edge so
       users can see content is being clipped and there's more to scroll
       to. Mask works in all Chromium/Safari/Firefox. */
    mask-image: linear-gradient(to right, black calc(100% - 1.5rem), transparent);
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 1.5rem), transparent);
}

/*.page.collect_board .choice-set {*/
/*    min-height: 48px;*/
/*}*/

.explore.page .choice {
    background: black;
    flex-direction: row;
    white-space: nowrap;
}

#range .choice{
    min-width: 10%;
}
.explore.page .choice.selected {
    background: #dd8800;
    color: white;
    /* transition: background 300ms, color 300ms; */
}

.connect.page .choice {
    min-width: 28%;
}

.collect.page .choice {
    min-width: 23%;
}

.settle.page .choice {
    min-width: 20%;
}

#plan_detail-filters .choice {
    min-width: 20%;
}

.plan.page .choice {
    font-size: 0.9rem;
}

/* Filter chevron indicators on explore category tabs */
.filter-chevron {
    font-size: 3vw;
    margin-left: 2px;
    opacity: 0.8;
}

/* Hide chevrons on narrow screens to save space */
@media (max-width: 420px) {
    .filter-chevron {
        display: none;
    }
}