/* Station discovery controls: only loaded on countries with category metadata. */
#station-categories { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 8px; max-width: 900px; margin: 0 auto 10px; padding-top: 2px; text-align: left; }
#station-categories[hidden] { display: none; }
.station-category-primary, .station-category-extra { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.station-category-primary { grid-column: 1; grid-row: 1; }
#station-categories:has(#station-categories-more[open]) .station-category-primary { visibility: hidden; }
#station-categories button, #station-categories summary { box-sizing: border-box; min-height: 36px; padding: 6px 11px; border: 1px solid #9aaab7; border-radius: 24px; background: #f8fafc; color: #153e60; font: 600 13px/22px Arial, sans-serif; cursor: pointer; }
#station-categories button:hover, #station-categories summary:hover { background: #e6eff7; }
#station-categories button[aria-pressed="true"] { color: white; background: #174c78; border-color: #174c78; }
#station-categories button:focus-visible, #station-categories summary:focus-visible { outline: 3px solid #207ab9; outline-offset: 3px; }
#station-categories-more { grid-column: 2 / -1; grid-row: 1; justify-self: end; }
#station-categories-more summary { display: flex; align-items: center; gap: 7px; list-style: none; border-radius: 8px; background: transparent; border-color: #59758c; }
#station-categories-more summary::-webkit-details-marker { display: none; }
.category-chevron { display: inline-block; }
#station-categories-more[open] .category-chevron { transform: rotate(180deg); }
.category-mobile-label { display: none; }
.station-category-extra { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20; box-shadow: 0 6px 16px rgb(20 40 60 / 15%); padding: 8px; border: 1px solid #b1bfca; border-radius: 10px; background: #e9eff4; }
#station-categories-more:not([open]) .station-category-extra { display: none; }
@media (max-width: 760px) {
    #station-categories { grid-template-columns: minmax(0, 1fr) auto; gap: 6px; margin-bottom: 8px; padding-top: 0; }
    .station-category-primary, .category-desktop-label { display: none; }
    #station-categories-more { grid-column: 1; justify-self: start; max-width: 100%; }
    .category-mobile-label { display: inline; }
    .station-category-extra { gap: 4px; padding: 8px; }
    #station-categories button, #station-categories summary { min-height: 44px; padding: 6px 10px; font-size: 13px; }
}