/* Filterbars (voyage catalog glacier/obsidian-glass command deck, /ships, /operators),
   month thermal gradient curve, precision range sliders, Checklist Popover Combobox,
   lazy region map <dialog>, active filter chips, and result meta row. */

/* Base `.filterbar`: full-width edge-to-edge sub-header docked flush beneath `header.site`
   (0px top gap, 0px side gaps). Used everywhere on mobile (<= 768px), on /ships, /operators,
   /?view=calendar, /?view=timeline, and on desktop / as soon as `.voyage-filterbar` sticks
   to the navbar (`.is-stuck`). */
.filterbar,
.filterbar.is-collapsed,
.filterbar:has(.filterbar-collapsible.is-collapsed) {
    position: sticky;
    top: var(--header-actual-h, 64px);
    z-index: 90;
    overflow-anchor: none;
    padding: 0;
    background: var(--glass-hdr-bg);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border-bottom: 1px solid var(--glass-hdr-border);
    box-shadow: var(--glass-hdr-shadow);
    pointer-events: auto;
    transition: background-color 0.22s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.22s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.filters {
    --filter-pad-x: 0px;
    pointer-events: auto;
    overflow-anchor: none;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid transparent;
    border-radius: 0;
    padding: 12px 0 16px;
    box-shadow: none;
    color: var(--glass-ink);
    display: flex;
    flex-direction: column;
    transition: background-color 0.22s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.22s cubic-bezier(0.16, 1, 0.3, 1),
                border-radius 0.22s cubic-bezier(0.16, 1, 0.3, 1),
                padding 0.22s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.filters.is-collapsed,
.filters:has(.filterbar-collapsible.is-collapsed) {
    padding: 9px 0;
    border-radius: 0;
}

.ship-filterbar,
.operator-filterbar,
.region-filterbar {
    margin-bottom: 0;
}

/* --- Polar Hero Command Deck (.catalog-masthead + .filterbar): Cantilevered Hero Card at Top -> Full-Width Docked Bar on Scroll --- */
.voyage-filterbar,
.voyage-filterbar.is-collapsed,
.voyage-filterbar:has(.filterbar-collapsible.is-collapsed),
.ship-filterbar,
.ship-filterbar.is-collapsed,
.ship-filterbar:has(.filterbar-collapsible.is-collapsed),
.operator-filterbar,
.operator-filterbar.is-collapsed,
.operator-filterbar:has(.filterbar-collapsible.is-collapsed),
.region-filterbar,
.region-filterbar.is-collapsed,
.region-filterbar:has(.filterbar-collapsible.is-collapsed) {
    z-index: 92;
}

@media (min-width: 769px) {
    /* Pull the Command Deck across the bottom horizon of .catalog-masthead.
       Keeping margin-top invariant between :not(.is-stuck) and .is-stuck prevents any scroll jump. */
    .catalog-masthead + .filterbar,
    .catalog-masthead + .filterbar.is-collapsed,
    .catalog-masthead + .filterbar:has(.filterbar-collapsible.is-collapsed) {
        margin-top: -48px;
    }

    .catalog-masthead + .filterbar:not(.is-stuck) {
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-bottom-color: transparent;
        box-shadow: none;
        pointer-events: none;
    }

    .catalog-masthead + .filterbar:not(.is-stuck) .filters {
        background: var(--glass-deck-bg);
        backdrop-filter: blur(22px) saturate(140%);
        -webkit-backdrop-filter: blur(22px) saturate(140%);
        border-color: var(--glass-deck-border);
        border-radius: 16px;
        padding: 12px 18px 16px;
        box-shadow: var(--glass-deck-shadow);
    }

    .catalog-masthead + .filterbar:not(.is-stuck).is-collapsed .filters,
    .catalog-masthead + .filterbar:not(.is-stuck) .filters.is-collapsed,
    .catalog-masthead + .filterbar:not(.is-stuck) .filters:has(.filterbar-collapsible.is-collapsed) {
        padding: 9px 14px;
        border-radius: 14px;
    }
}

/* Filter panel header with toggle button, quick search, map trigger, count, and reset link */
.filterbar-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--glass-divider);
    transition: border-bottom-color .2s ease, padding-bottom .2s ease;
}

.filters.is-collapsed .filterbar-head,
.filters:has(.filterbar-collapsible.is-collapsed) .filterbar-head,
.ship-filterbar.is-collapsed .filterbar-head,
.ship-filterbar:has(.filterbar-collapsible.is-collapsed) .filterbar-head,
.operator-filterbar.is-collapsed .filterbar-head,
.operator-filterbar:has(.filterbar-collapsible.is-collapsed) .filterbar-head,
.region-filterbar.is-collapsed .filterbar-head,
.region-filterbar:has(.filterbar-collapsible.is-collapsed) .filterbar-head {
    padding-bottom: 0;
    border-bottom-color: transparent;
}

.command-primary {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
}

.filterbar-toggle {
    height: 36px;
    padding: 0 12px;
    margin: 0;
    border-radius: 9px;
    background: var(--glass-ctrl-bg);
    border: 1px solid var(--glass-ctrl-border);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    color: var(--glass-ink);
    text-transform: uppercase;
    letter-spacing: var(--ls-label);
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.filterbar-toggle:hover {
    background: var(--glass-ctrl-bg-hover);
    border-color: var(--glass-ctrl-border-hover);
}

.filterbar-toggle:focus-visible {
    outline: 2px solid var(--glass-accent);
    outline-offset: 2px;
    border-radius: 9px;
}

.filterbar-icon {
    display: inline-flex;
    align-items: center;
    color: var(--glass-accent);
}

.filterbar-icon .icon {
    width: 15px;
    height: 15px;
}

.filterbar-heading {
    font: var(--t-label);
    font-weight: 700;
    color: var(--glass-ink);
    font-size: 10.5px;
    letter-spacing: 0.10em;
}

.filterbar-active-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--r-pill);
    background: var(--btn-bg);
    color: var(--btn-ink);
    font: 700 10.5px/1 var(--f-mono);
    font-variant-numeric: tabular-nums;
}

.filterbar-active-badge[hidden] {
    display: none;
}

.filterbar-chevron {
    display: inline-flex;
    align-items: center;
    color: var(--glass-muted);
    transition: transform .25s cubic-bezier(0.4, 0, 0.2, 1);
}

.filterbar-toggle[aria-expanded="false"] .filterbar-chevron {
    transform: rotate(-90deg);
}

.command-search {
    flex: 1 1 260px;
    max-width: 360px;
    min-width: 150px;
}

.filterbar-meta {
    display: inline-flex;
    align-items: center;
    gap: var(--s3);
    flex-shrink: 0;
}

.filterbar-count {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: var(--t-body);
    font-size: 12.5px;
    color: var(--glass-muted);
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: color .15s ease;
}

.filterbar-count:hover {
    color: var(--glass-ink);
}

.filterbar-count:focus-visible {
    outline: 2px solid var(--glass-accent);
    outline-offset: 3px;
    border-radius: var(--r-xs);
}

.filterbar-count b.num {
    color: var(--glass-ink);
    font-family: var(--f-mono);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.btn-reset {
    color: var(--glass-accent);
    font: var(--t-body);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    padding: 5px 11px;
    border-radius: 8px;
    background: var(--glass-accent-soft);
    border: 1px solid var(--glass-accent-border);
    white-space: nowrap;
    cursor: pointer;
    transition: color .15s ease, background .15s ease, border-color .15s ease;
}

.btn-reset:hover {
    background: var(--accent-soft-hover);
    border-color: var(--glass-accent);
    color: var(--glass-ink);
    text-decoration: none;
}

.reset-text-short {
    display: none;
}

/* Suppress collapse/expand transitions during initial mount and off-DOM Turbo Frame view swaps */
.filterbar.no-collapse-anim,
.filterbar.no-collapse-anim .filters,
.filterbar.no-collapse-anim .filterbar-head,
.filterbar.no-collapse-anim .filterbar-chevron,
.filterbar.no-collapse-anim .filterbar-collapsible,
.filterbar.no-collapse-anim .filterbar-body {
    transition: none !important;
}

/* Collapsible container with CSS Grid height transition */
.filterbar-collapsible {
    display: grid;
    grid-template-rows: 1fr;
    opacity: 1;
    overflow: hidden;
    overflow-anchor: none;
    transition: grid-template-rows .26s cubic-bezier(0.2, 0, 0, 1), opacity .2s ease;
}

.filterbar-collapsible.is-collapsed {
    grid-template-rows: 0fr;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
}

.filterbar-collapsible.is-expanded {
    grid-template-rows: 1fr;
    opacity: 1;
    pointer-events: auto;
    overflow: visible;
}

.filterbar-collapsible.is-collapsed .filterbar-body {
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
}

.filterbar-body {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s4);
    padding: var(--s4) 8px 0;
    transition: padding .26s cubic-bezier(0.2, 0, 0, 1);
}

.voyage-filterbar .filterbar-body,
.ship-filterbar .filterbar-body,
.operator-filterbar .filterbar-body {
    padding: 16px 2px 2px;
}

/* 3-Zone Architectural Bento Grid inside the Voyage Command Deck */
.filters-bento {
    display: grid;
    grid-template-columns: minmax(268px, 0.94fr) minmax(346px, 1.24fr) minmax(0, 1.46fr);
    align-items: stretch;
}

.filters-bento--two-col {
    grid-template-columns: minmax(346px, 1.08fr) minmax(0, 1.42fr);
}

.bento-zone {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
}

.bento-zone + .bento-zone {
    padding-left: 18px;
    margin-left: 18px;
    border-left: 1px solid var(--glass-divider);
}

.bento-zone-ranges {
    justify-content: space-between;
    gap: 16px;
}

.bento-zone-facets {
    justify-content: space-between;
    gap: 11px;
}

.facets-row-primary,
.facets-row-destinations {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: start;
}

.facets-row-fleet {
    display: grid;
    grid-template-columns: 1.1fr 1.1fr 0.95fr;
    gap: 10px;
    align-items: start;
}

/* Compact month sparkline histogram widget */
.month-histogram-widget {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
}

.range-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: nowrap;
    gap: 10px;
    margin-bottom: 6px;
}

.month-histogram-widget .range-head {
    margin-bottom: 10px;
}

.range-head .range-label {
    margin: 0;
    line-height: 16px;
    color: var(--glass-muted);
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.range-head output.num {
    font-family: var(--f-mono);
    font-weight: 600;
    font-size: 12.5px;
    color: var(--glass-ink-2);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    flex-shrink: 0;
    transition: color .15s ease;
}

.range-slider-item.is-filtered .range-head output.num,
.month-histogram-widget.is-filtered .range-head output.num,
.month-histogram-widget.is-jump-mode .range-head output.num {
    color: var(--glass-accent);
}

.mhist-bars {
    position: relative;
    height: 42px;
    margin: 0 7px 6px;
    overflow: visible;
}

.mhist-chart {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.mhist-axis {
    stroke: var(--glass-divider);
    stroke-width: 1;
}

.mhist-line-muted {
    stroke: var(--glass-ctrl-border-hover);
    stroke-opacity: 0.45;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mhist-line-active {
    stroke-width: 2.35;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 2px 6px rgba(249, 115, 22, 0.22));
}

.mhist-hit-layer {
    position: absolute;
    inset: 0;
    overflow: visible;
}

.mhist-col {
    position: absolute;
    top: 0;
    bottom: 0;
    cursor: pointer;
    user-select: none;
    overflow: visible;
}

.mhist-guide {
    position: absolute;
    top: 2px;
    bottom: 3px;
    width: 1px;
    transform: translateX(-50%);
    background: linear-gradient(180deg, transparent 0%, var(--glass-muted) 50%, transparent 100%);
    opacity: 0;
    pointer-events: none;
    transition: opacity .14s ease;
}

.mhist-dot {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    transform: translate(-50%, 50%) scale(0.65);
    background: var(--dot-color, #38bdf8);
    border: 1.5px solid #ffffff;
    box-shadow: 0 0 10px var(--dot-color, #38bdf8);
    opacity: 0;
    pointer-events: none;
    transition: opacity .14s ease, transform .14s ease;
}

.mhist-col:hover {
    z-index: 25;
}

.mhist-col:hover .mhist-guide {
    opacity: 1;
}

.mhist-col:hover .mhist-dot,
.mhist-col.is-pinned .mhist-dot {
    opacity: 1;
    transform: translate(-50%, 50%) scale(1);
}

.month-histogram-widget.is-jump-mode .mhist-col.is-empty {
    cursor: default;
}

.mhist-col.is-current-ym .mhist-guide {
    opacity: 0.72;
    background: linear-gradient(180deg, transparent 0%, var(--dot-color, #38bdf8) 55%, var(--dot-color, #38bdf8) 100%);
}

.mhist-col.is-current-ym .mhist-dot {
    opacity: 1;
    transform: translate(-50%, 50%) scale(1.14);
    box-shadow: 0 0 0 3px var(--accent-ring), 0 0 12px var(--dot-color, #38bdf8);
}

.mhist-tooltip {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(2px);
    background: #061426;
    border: 1px solid rgba(125, 211, 252, 0.28);
    border-radius: var(--r-pill);
    padding: 3px 9px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 50;
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease, visibility .15s ease;
    box-shadow: 0 6px 16px rgba(2, 8, 20, 0.45);
    font-size: 11px;
    color: #ffffff;
    line-height: 1.3;
}

.mhist-tooltip strong {
    font-weight: 700;
    color: #ffffff;
}

.mhist-tooltip .mhist-tip-count {
    font-family: var(--f-mono);
    font-size: 10.5px;
    font-weight: 600;
    color: #7dd3fc;
}

.mhist-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 4px;
    border-style: solid;
    border-color: #061426 transparent transparent transparent;
}

.mhist-col:hover .mhist-tooltip {
    opacity: 1;
    visibility: visible;
}

.mhist-slider {
    margin: 0 7px;
}

/* Precision 3px Range Sliders (calm at rest, luminous when .is-filtered) */
.mhist-slider.noUi-target,
.custom-slider.noUi-target,
.price-range .noUi-target,
.ship-year-slider.noUi-target,
.operator-slider.noUi-target {
    height: 3px;
    border: none;
    box-shadow: none;
    background: var(--glass-slider-track);
    border-radius: var(--r-pill);
}

.mhist-slider .noUi-connect,
.custom-slider .noUi-connect,
.price-range .noUi-connect,
.ship-year-slider .noUi-connect,
.operator-slider .noUi-connect {
    background: var(--glass-slider-connect);
    box-shadow: none;
    border-radius: var(--r-pill);
    transition: background .15s ease, box-shadow .15s ease;
}

/* Calm at rest on /, /ships, and /operators; luminous when narrowed (.is-filtered) */
.operator-filter-price.is-filtered .noUi-connect,
.operator-filter-passengers.is-filtered .noUi-connect,
.ship-filter-year.is-filtered .noUi-connect,
.range-slider-item.is-filtered .noUi-connect,
.month-histogram-widget.is-filtered .noUi-connect {
    background: linear-gradient(90deg, var(--btn-bg) 0%, var(--glass-accent) 100%);
    box-shadow: 0 0 10px var(--accent-ring);
}

.mhist-slider .noUi-handle,
.custom-slider .noUi-handle,
.price-range .noUi-handle,
.ship-year-slider .noUi-handle,
.operator-slider .noUi-handle {
    width: 14px;
    height: 14px;
    right: -7px;
    top: -5.5px;
    border-radius: 50%;
    border: 1.85px solid var(--glass-slider-knob-border);
    background: var(--glass-slider-knob);
    box-shadow: 0 1px 3px rgba(11, 29, 58, 0.25);
    cursor: grab;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
}

.operator-filter-price.is-filtered .noUi-handle,
.operator-filter-passengers.is-filtered .noUi-handle,
.ship-filter-year.is-filtered .noUi-handle,
.range-slider-item.is-filtered .noUi-handle,
.month-histogram-widget.is-filtered .noUi-handle,
.month-histogram-widget.is-jump-mode .noUi-handle {
    background: var(--btn-bg);
    border-color: #ffffff;
    box-shadow: 0 0 0 3px var(--accent-ring), 0 2px 6px rgba(0, 0, 0, 0.25);
}

.mhist-slider .noUi-handle::before,
.custom-slider .noUi-handle::before,
.price-range .noUi-handle::before,
.ship-year-slider .noUi-handle::before,
.operator-slider .noUi-handle::before,
.mhist-slider .noUi-handle::after,
.custom-slider .noUi-handle::after,
.price-range .noUi-handle::after,
.ship-year-slider .noUi-handle::after,
.operator-slider .noUi-handle::after {
    display: none;
    content: none;
}

.mhist-slider .noUi-handle:hover,
.custom-slider .noUi-handle:hover,
.price-range .noUi-handle:hover,
.ship-year-slider .noUi-handle:hover,
.operator-slider .noUi-handle:hover {
    transform: scale(1.16);
    box-shadow: 0 0 0 4px var(--accent-ring), 0 2px 6px rgba(11, 29, 58, 0.22);
}

.mhist-slider .noUi-handle:active,
.custom-slider .noUi-handle:active,
.price-range .noUi-handle:active,
.ship-year-slider .noUi-handle:active,
.operator-slider .noUi-handle:active {
    transform: scale(1.2);
    cursor: grabbing;
    background: var(--btn-bg);
    border-color: #ffffff;
    box-shadow: 0 0 0 5px var(--accent-ring);
}

.mhist-slider .noUi-handle:focus-visible,
.custom-slider .noUi-handle:focus-visible,
.price-range .noUi-handle:focus-visible,
.ship-year-slider .noUi-handle:focus-visible,
.operator-slider .noUi-handle:focus-visible {
    outline: 2px solid var(--glass-accent);
    outline-offset: 2px;
}

/* Field labels & inputs */
.filter-group {
    min-width: 0;
}

.filters label,
.filters .range-label {
    display: block;
    font: var(--t-label);
    text-transform: uppercase;
    letter-spacing: 0.10em;
    font-size: 10px;
    color: var(--glass-muted);
    margin-bottom: 5px;
}

.filters select,
.filters input[type=text],
.filters input[type=search],
.filters input[type=number] {
    width: 100%;
    height: 36px;
    padding: 0 11px;
    border: 1px solid var(--glass-ctrl-border);
    border-radius: 9px;
    background: var(--glass-ctrl-bg);
    font: var(--t-body);
    color: var(--glass-ink);
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.filters input[type=text]:hover,
.filters input[type=search]:hover,
.filters input[type=number]:hover {
    background-color: var(--glass-ctrl-bg-hover);
    border-color: var(--glass-ctrl-border-hover);
}

.filters select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 28px;
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2364748B' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.filters #f-q,
.filters input.command-search-input {
    height: 36px;
    padding-left: 34px;
    border-radius: 9px;
    background: var(--glass-ctrl-bg) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4.5 4.5'/%3E%3C/svg%3E")
        no-repeat left 11px center;
}

html[data-theme="dark"] .filters #f-q,
html[data-theme="dark"] .filters input.command-search-input {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237DD3FC' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4.5 4.5'/%3E%3C/svg%3E");
}

.filters input::placeholder {
    color: var(--glass-muted);
    opacity: 0.85;
}

.filters select:focus,
.filters input:focus,
.filters #f-q:focus,
.filters input.command-search-input:focus {
    outline: none;
    border-color: var(--glass-accent);
    background-color: var(--glass-ctrl-bg-focus);
    box-shadow: 0 0 0 3px var(--accent-ring);
}

.range-slider-item {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.range-slider-item .custom-slider {
    margin: 7px 7px 3px;
}

.range-slider-item.is-disabled {
    opacity: 0.45;
    pointer-events: none;
    cursor: not-allowed;
}

.range-slider-item.is-disabled output {
    color: var(--glass-muted);
}

.range-slider-item.is-disabled .custom-slider {
    background: var(--glass-slider-track);
    position: relative;
    border-radius: var(--r-pill);
    height: 3px;
}

.range-slider-item.is-disabled .custom-slider::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--glass-slider-knob);
    border: 1.75px solid var(--glass-ctrl-border-hover);
}

/* Tactile Fly & Cruise Operator Package Switch Card */
.filters .tag-filter {
    min-width: 0;
    margin-top: auto;
}

.filters .tag-filter.is-zero {
    opacity: 0.46;
    pointer-events: none;
}

.filters .tag-toggle {
    position: relative;
    display: flex;
    width: 100%;
    margin: 0;
    cursor: pointer;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}

.filters .tag-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.tag-toggle-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 9px 13px;
    border-radius: 10px;
    background: var(--glass-ctrl-bg);
    border: 1px solid var(--glass-ctrl-border);
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.tag-toggle:hover .tag-toggle-card {
    background: var(--glass-ctrl-bg-hover);
    border-color: var(--glass-ctrl-border-hover);
}

.tag-toggle-copy {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.tag-toggle-copy strong {
    font: 600 13px/1.25 var(--f-sans);
    color: var(--glass-ink);
}

.tag-toggle-sub {
    font: 400 11.5px/1.25 var(--f-sans);
    color: var(--glass-muted);
}

.tag-toggle-count {
    font: 600 11.5px/1 var(--f-mono);
    font-style: normal;
    font-variant-numeric: tabular-nums;
    padding: 4px 8px;
    border-radius: var(--r-pill);
    background: var(--glass-accent-soft);
    color: var(--glass-accent);
    flex-shrink: 0;
    transition: background .15s ease, color .15s ease;
}

.filters .tag-toggle input:checked + .tag-toggle-card {
    background: var(--glass-accent-soft);
    border-color: var(--glass-accent);
    box-shadow: 0 0 0 1px var(--glass-accent-border);
}

.filters .tag-toggle input:checked + .tag-toggle-card .tag-toggle-copy strong {
    color: var(--glass-ink);
}

.filters .tag-toggle input:checked + .tag-toggle-card .tag-toggle-sub {
    color: var(--glass-ink-2);
}

.filters .tag-toggle input:checked + .tag-toggle-card .tag-toggle-count {
    background: var(--btn-bg);
    color: var(--btn-ink);
}

.filters .tag-toggle input:focus-visible + .tag-toggle-card {
    border-color: var(--glass-accent);
    box-shadow: 0 0 0 3px var(--accent-ring);
}

/* Filter by map button */
.map-btn,
a.map-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    padding: 0 13px;
    border-radius: 9px;
    background: var(--glass-accent-soft);
    border: 1px solid var(--glass-accent-border);
    color: var(--glass-ink);
    font: var(--t-body);
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
}

.map-btn:hover,
a.map-btn:hover {
    background: var(--accent-soft-hover);
    border-color: var(--glass-accent);
    color: var(--glass-ink);
    text-decoration: none;
}

.map-btn:focus-visible,
a.map-btn:focus-visible {
    outline: none;
    border-color: var(--glass-accent);
    box-shadow: 0 0 0 3px var(--accent-ring);
}

.map-btn .icon,
a.map-btn .icon {
    width: 15px;
    height: 15px;
    color: var(--glass-accent);
    stroke: currentColor;
    flex-shrink: 0;
    transition: transform .15s ease, color .15s ease;
}

.map-btn:hover .icon,
a.map-btn:hover .icon {
    transform: scale(1.08);
}

.map-btn .on-count {
    background: var(--btn-bg);
    color: var(--btn-ink);
    border-radius: var(--r-pill);
    font-family: var(--f-mono);
    font-size: 10.5px;
    line-height: 1;
    padding: 3px 6px;
    font-weight: 700;
}

.filters noscript button {
    background: var(--accent);
    color: var(--accent-ink);
    border: 0;
    border-radius: var(--r-md);
    padding: 9px 18px;
    font: var(--t-body);
    cursor: pointer;
}

/* Responsive Breakpoints for Bento Command Deck & Filterbars */
@media (max-width: 1180px) {
    .count-extra {
        display: none;
    }
    .filters-bento,
    .filters-bento--two-col {
        grid-template-columns: 1fr 1fr;
        gap: 18px 22px;
    }
    .bento-zone + .bento-zone {
        padding-left: 0;
        margin-left: 0;
        border-left: none;
    }
    .bento-zone-ranges {
        padding-left: 22px;
        border-left: 1px solid var(--glass-divider);
    }
    .bento-zone-facets {
        grid-column: 1 / -1;
        padding-top: 16px;
        border-top: 1px solid var(--glass-divider);
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    .bento-zone-facets > .facets-row-fleet {
        grid-column: 1 / -1;
    }
}

@media (max-width: 860px) {
    .bento-zone-facets {
        grid-template-columns: 1fr;
    }
    .bento-zone-facets > .facets-row-fleet {
        grid-column: auto;
    }
}

@media (max-width: 768px) {
    .filters {
        --filter-pad-x: 0px;
        padding: 10px 0 12px;
        border-radius: 0;
        max-height: calc(100dvh - var(--header-actual-h, 56px));
    }
    .filters.is-collapsed,
    .filters:not(.is-expanded),
    .filters:has(.filterbar-collapsible.is-collapsed) {
        padding: 8px 0;
        border-radius: 0;
    }
    .filterbar-head {
        gap: 8px;
        flex-wrap: wrap;
        width: 100%;
    }
    .filterbar:has(.command-primary) .command-primary {
        order: 2;
        flex: 1 1 100%;
        flex-wrap: nowrap;
        gap: 8px;
    }
    .filterbar:has(.command-primary) .filterbar-toggle {
        height: 34px;
        padding: 0 10px;
    }
    .filterbar:has(.command-primary) .command-search {
        flex: 1 1 auto;
        max-width: none;
        min-width: 0;
    }
    .filterbar:has(.command-primary) .filters #f-q,
    .filterbar:has(.command-primary) .filters input.command-search-input,
    .voyage-filterbar .map-btn {
        height: 34px;
    }
    .voyage-filterbar .map-btn {
        padding: 0 10px;
    }
    .voyage-filterbar .map-btn-label {
        display: none;
    }
    .filterbar:has(.command-primary) .filterbar-meta {
        order: 1;
        width: 100%;
        justify-content: space-between;
    }
    .filterbar-toggle {
        flex: 0 0 auto;
        white-space: nowrap;
    }
    .filterbar-meta {
        display: flex;
        align-items: center;
        gap: var(--s2);
        flex: 1 1 auto;
        min-width: 0;
        justify-content: flex-end;
        flex-wrap: nowrap;
    }
    .filterbar-count {
        font-size: 12.5px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .btn-reset {
        flex: 0 0 auto;
        font-size: 12px;
        white-space: nowrap;
    }
    .reset-text-full { display: none; }
    .reset-text-short { display: inline; }
    .filterbar,
    .filterbar.is-collapsed,
    .filterbar:has(.filterbar-collapsible.is-collapsed),
    .catalog-masthead + .filterbar,
    .catalog-masthead + .filterbar.is-collapsed,
    .catalog-masthead + .filterbar:has(.filterbar-collapsible.is-collapsed) {
        margin-top: 0;
        padding: 0;
    }
    .filterbar-collapsible:not(.is-expanded) {
        grid-template-rows: 0fr;
        opacity: 0;
        overflow: hidden;
        pointer-events: none;
    }
    .filterbar-collapsible.is-expanded {
        grid-template-rows: 1fr;
        opacity: 1;
        overflow: hidden;
        pointer-events: auto;
        min-height: 0;
    }
    .filters:not(.is-expanded) .filterbar-head,
    .filters.is-collapsed .filterbar-head {
        margin: 0;
        padding: 0;
        border-bottom: none;
    }
    .filterbar-body {
        max-height: calc(100dvh - var(--header-actual-h, 54px) - 140px);
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
        touch-action: pan-y;
        padding-right: 6px;
        padding-bottom: var(--s3);
    }
    .filterbar-collapsible.is-collapsed .filterbar-body,
    .filterbar-collapsible:not(.is-expanded) .filterbar-body {
        overflow: hidden;
        max-height: 0;
    }
    .filters-bento,
    .filters-bento--two-col {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .bento-zone + .bento-zone {
        margin-left: 0;
        padding-left: 0;
        border-left: none;
        padding-top: 14px;
        border-top: 1px solid var(--glass-divider);
    }
    .facets-row-primary,
    .facets-row-destinations,
    .facets-row-fleet {
        grid-template-columns: 1fr 1fr;
    }
    .facets-row-fleet > .filter-group:last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 480px) {
    .facets-row-primary,
    .facets-row-destinations,
    .facets-row-fleet {
        grid-template-columns: 1fr;
    }
}

/* Ship filter bar on /ships & Operator filter bar on /operators */
.ship-filters {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1.25fr;
    gap: 14px;
    align-items: start;
    padding: 0;
}

@media (min-width: 961px) {
    .ship-filter-year,
    .operator-filter-price {
        padding-left: 20px;
        margin-left: 6px;
        border-left: 1px solid var(--glass-divider);
    }
}

.operator-filters {
    display: grid;
    grid-template-columns: 1fr 0.95fr 1.15fr 1.15fr;
    gap: 14px;
    align-items: start;
    padding: 0;
}

.region-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 18px;
    align-items: start;
    padding: 0;
}

.ship-filter-item,
.operator-filter-item,
.region-filter-item {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ship-filter-item label,
.ship-filter-item .range-label,
.operator-filter-item label,
.operator-filter-item .range-label,
.region-filter-item label,
.region-filter-item .range-label {
    display: block;
    font: var(--t-label);
    text-transform: uppercase;
    letter-spacing: 0.10em;
    font-size: 10px;
    color: var(--glass-muted);
    margin-bottom: 5px;
    height: auto;
    line-height: 16px;
}

.ship-filter-head,
.operator-filter-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: nowrap;
    gap: 8px;
    height: auto;
    margin-bottom: 5px;
}

.ship-filter-head .range-label,
.operator-filter-head .range-label {
    margin-bottom: 0;
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ship-filter-head output,
.operator-filter-head output {
    font-family: var(--f-mono);
    font-weight: 600;
    font-size: 12.5px;
    color: var(--glass-ink-2);
    line-height: 16px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    flex-shrink: 0;
    transition: color .15s ease;
}

.operator-filter-price.is-filtered .operator-filter-head output,
.operator-filter-passengers.is-filtered .operator-filter-head output,
.ship-filter-year.is-filtered .ship-filter-head output {
    color: var(--glass-accent);
}

.ship-year-slider-wrap,
.operator-slider-wrap {
    height: 36px;
    display: flex;
    align-items: center;
}

.ship-year-slider,
.operator-slider {
    width: 100%;
    margin: 0 7px;
}

.ship-filter-item select {
    width: 100%;
    height: 36px;
    padding: 0 28px 0 11px;
    border: 1px solid var(--glass-ctrl-border);
    border-radius: 9px;
    background-color: var(--glass-ctrl-bg);
    font: var(--t-body);
    color: var(--glass-ink);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    box-shadow: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2364748B' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.ship-filter-item select:focus,
.filter-input-search:focus {
    outline: none;
    border-color: var(--glass-accent);
    background-color: var(--glass-ctrl-bg-focus);
    box-shadow: 0 0 0 3px var(--accent-ring);
}

.filter-input-search {
    width: 100%;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--glass-ctrl-border);
    border-radius: 9px;
    background-color: var(--glass-ctrl-bg);
    font: var(--t-body);
    color: var(--glass-ink);
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.ship-empty-state {
    padding: var(--s10) var(--s4);
    text-align: center;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    margin: var(--s6) 0;
}

.ship-empty-state p {
    font-size: 16px;
    color: var(--muted);
    margin: 0 0 var(--s4);
}

.btn-reset-large {
    background: var(--accent);
    color: var(--accent-ink);
    border: none;
    border-radius: var(--r-md);
    padding: 8px 18px;
    font: var(--t-body);
    font-weight: 500;
    cursor: pointer;
    transition: background .15s ease;
}

.btn-reset-large:hover {
    background: var(--accent-hover);
}

@media (max-width: 960px) {
    .ship-filters,
    .operator-filters { grid-template-columns: 1fr 1fr; gap: var(--s4); }
}

@media (max-width: 600px) {
    .ship-filters,
    .operator-filters,
    .region-filters { grid-template-columns: 1fr; gap: var(--s3); }
}

/* ============================================================================
   Fixed-Height (36px) Checklist Popover Combobox (replaces TomSelect)
   ============================================================================ */
select.combobox-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    pointer-events: none !important;
}

/* Zero-CLS pre-hydration fallback matching .combobox-trigger dimensions */
select[data-controller~="select"]:not(.combobox-native) {
    display: block;
    width: 100%;
    min-height: 36px;
    height: 36px;
    padding: 0 30px 0 11px;
    border: 1px solid var(--glass-ctrl-border);
    border-radius: 9px;
    font: var(--t-body);
    color: var(--glass-ink);
    background-color: var(--glass-ctrl-bg);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.combobox {
    position: relative;
    width: 100%;
    min-width: 0;
}

.combobox-trigger {
    position: relative;
    width: 100%;
    height: 36px;
    min-height: 36px;
    padding: 0 30px 0 11px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--glass-ctrl-border);
    border-radius: 9px;
    background: var(--glass-ctrl-bg);
    color: var(--glass-ink);
    font: var(--t-body);
    text-align: left;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

.combobox:not(.is-empty) .combobox-trigger:hover {
    background: var(--glass-ctrl-bg-hover);
    border-color: var(--glass-ctrl-border-hover);
}

.combobox-trigger:focus-visible {
    outline: none;
    border-color: var(--glass-accent);
    background: var(--glass-ctrl-bg-focus);
    box-shadow: 0 0 0 3px var(--accent-ring);
}

.combobox.is-open .combobox-trigger {
    border-color: var(--glass-accent);
    background: var(--glass-ctrl-bg-focus);
    box-shadow: 0 0 0 3px var(--accent-ring);
}

.combobox.is-clearable .combobox-trigger {
    padding-right: 50px;
}

.combobox.has-value .combobox-trigger {
    border-color: var(--glass-accent-border);
    background: var(--glass-ctrl-bg-hover);
}

.combobox.has-value.is-open .combobox-trigger {
    border-color: var(--glass-accent);
}

.combobox-value {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.25;
    color: var(--glass-muted);
}

.combobox.has-value .combobox-value,
.combobox.is-non-clearable .combobox-value {
    color: var(--glass-ink);
    font-weight: 500;
}

.combobox-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 19px;
    padding: 0 6px;
    border-radius: var(--r-pill);
    background: var(--glass-accent-soft);
    border: 1px solid var(--glass-accent-border);
    color: var(--glass-accent);
    font: 700 10.5px/1 var(--f-mono);
    font-variant-numeric: tabular-nums;
}

.combobox-badge[hidden] {
    display: none;
}

.combobox-indicator {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--glass-muted);
    pointer-events: none;
}

.combobox-chevron {
    transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), color 0.15s ease;
}

.combobox.is-open .combobox-chevron {
    transform: rotate(180deg);
    color: var(--glass-accent);
}

.combobox-dash {
    display: none;
    font: 500 12px/1 var(--f-mono);
    color: var(--glass-muted);
}

/* Friendly Empty / Zero-Option Facet State ("None available" + dash "—") */
.combobox.is-empty .combobox-trigger {
    cursor: not-allowed;
    background: transparent;
    border-style: dashed;
    border-color: var(--glass-divider);
    opacity: 0.72;
}

.combobox.is-empty .combobox-value {
    color: var(--glass-muted);
    font-size: 12.5px;
}

.combobox.is-empty .combobox-chevron {
    display: none;
}

.combobox.is-empty .combobox-dash {
    display: inline;
}

/* Sibling Quick-Clear "×" Button (valid HTML5, never nested inside trigger button) */
.combobox-clear {
    position: absolute;
    right: 26px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--glass-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.14s ease, color 0.14s ease;
}

.combobox-clear[hidden] {
    display: none;
}

.combobox-clear:hover {
    background: var(--glass-accent-soft);
    color: var(--glass-accent);
}

.combobox-clear:focus-visible {
    outline: 2px solid var(--glass-accent);
    outline-offset: 1px;
}

/* Portaled Checklist Popover */
.combobox-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10019;
    background: rgba(4, 11, 22, 0.54);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.combobox-backdrop[hidden] {
    display: none;
}

.combobox-popover {
    position: fixed;
    z-index: 10020;
    display: flex;
    flex-direction: column;
    background: var(--glass-pop-bg);
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    border: 1px solid var(--glass-pop-border);
    border-radius: 13px;
    box-shadow: var(--glass-pop-shadow);
    color: var(--glass-ink);
    overflow: hidden;
    outline: none;
    animation: comboboxPopIn 0.13s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes comboboxPopIn {
    from { opacity: 0; transform: translateY(-4px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes comboboxSheetUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.combobox-sheet-head {
    display: none;
}

.combobox-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 8px 7px;
    border-bottom: 1px solid var(--glass-divider);
}

.combobox-toolbar[hidden] {
    display: none;
}

.combobox-toolbar.no-search {
    justify-content: flex-end;
    padding: 6px 10px;
}

.combobox-search-wrap {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
}

.combobox-search-icon {
    position: absolute;
    left: 9px;
    color: var(--glass-muted);
    pointer-events: none;
}

.combobox-search {
    width: 100%;
    height: 32px;
    padding: 0 9px 0 28px;
    border: 1px solid var(--glass-ctrl-border);
    border-radius: 8px;
    background: var(--glass-ctrl-bg);
    color: var(--glass-ink);
    font: var(--t-body);
    font-size: 12.5px;
    outline: none;
    transition: border-color 0.14s ease, background-color 0.14s ease, box-shadow 0.14s ease;
}

.combobox-search::placeholder {
    color: var(--glass-muted);
    opacity: 0.82;
}

.combobox-search:focus {
    border-color: var(--glass-accent);
    background: var(--glass-ctrl-bg-focus);
    box-shadow: 0 0 0 2px var(--accent-ring);
}

.combobox-toolbar-clear,
.combobox-action-clear {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: var(--glass-accent);
    font: 600 12px/1 var(--f-sans);
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.14s ease, color 0.14s ease;
}

.combobox-toolbar-clear[hidden],
.combobox-action-clear[hidden] {
    display: none;
}

.combobox-toolbar-clear:hover,
.combobox-action-clear:hover {
    background: var(--glass-accent-soft);
}

.combobox-list {
    max-height: var(--combobox-list-max-h, 276px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 5px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.combobox-option {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 9px;
    border-radius: 8px;
    font: 500 13px/1.35 var(--f-sans);
    color: var(--glass-ink-2);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.combobox-option:hover,
.combobox-option.is-active {
    background: var(--glass-ctrl-bg-hover);
    color: var(--glass-ink);
}

.combobox-option.is-selected {
    background: var(--glass-accent-soft);
    color: var(--glass-ink);
    font-weight: 600;
}

.combobox-option.is-selected:hover,
.combobox-option.is-selected.is-active {
    background: var(--accent-soft-hover);
}

.combobox-check {
    width: 16px;
    height: 16px;
    border-radius: 4.5px;
    border: 1.5px solid var(--glass-ctrl-border-hover);
    background: var(--glass-ctrl-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: transparent;
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.combobox-option:hover .combobox-check {
    border-color: var(--glass-accent);
}

.combobox-option.is-selected .combobox-check {
    background: var(--btn-bg);
    border-color: var(--btn-bg);
    color: #FFFFFF;
}

.combobox-single-mark {
    width: 15px;
    height: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: transparent;
}

.combobox-option.is-selected .combobox-single-mark {
    color: var(--glass-accent);
}

.combobox-opt-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.combobox-opt-count {
    flex: 0 0 auto;
    font: 600 11px/1 var(--f-mono);
    font-variant-numeric: tabular-nums;
    padding: 3px 6.5px;
    border-radius: var(--r-pill);
    background: var(--glass-ctrl-bg);
    color: var(--glass-muted);
}

.combobox-option.is-selected .combobox-opt-count {
    background: var(--glass-accent-soft);
    color: var(--glass-accent);
}

.combobox-no-results {
    padding: 14px 12px;
    text-align: center;
    font: var(--t-body);
    font-size: 12.5px;
    color: var(--glass-muted);
}

/* Mobile <= 640px Bottom-Sheet Checklist Adaptation */
.combobox-popover.is-sheet {
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: 100%;
    max-width: 100%;
    max-height: min(78dvh, 520px);
    border-radius: 18px 18px 0 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom, 10px);
    animation: comboboxSheetUp 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.combobox-popover.is-sheet .combobox-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 16px 11px;
    border-bottom: 1px solid var(--glass-divider);
}

.combobox-sheet-title {
    font: 600 14px/1.2 var(--f-sans);
    color: var(--glass-ink);
}

.combobox-sheet-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.combobox-action-done {
    border: 0;
    border-radius: 8px;
    background: var(--btn-bg);
    color: var(--btn-ink);
    font: 600 12.5px/1 var(--f-sans);
    padding: 8px 14px;
    cursor: pointer;
}

.combobox-popover.is-sheet .combobox-toolbar .combobox-toolbar-clear {
    display: none;
}

.combobox-popover.is-sheet .combobox-toolbar.no-search {
    display: none;
}

.combobox-popover.is-sheet .combobox-list {
    max-height: none;
    flex: 1 1 auto;
    padding: 8px 10px 12px;
}

.combobox-popover.is-sheet .combobox-option {
    min-height: 44px;
    padding: 9px 11px;
    font-size: 14px;
}

/* Prevent iOS Safari / Android mobile viewport auto-zoom on form control focus */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea,
    .combobox-search,
    .meta-row .sorter select {
        font-size: 16px;
    }

    .filters input::placeholder,
    .combobox-search::placeholder,
    .filter-input-search::placeholder {
        font-size: 16px;
    }
}

/* Lazy Region Map <dialog> & SVG region map */
.region-dialog {
    max-width: min(96vw, 1040px);
    width: 100%;
    border: 0;
    padding: 0;
    border-radius: var(--r-lg);
    box-shadow: var(--sh-pop);
    color: var(--ink);
    background: var(--card);
}

.region-dialog::backdrop {
    background: rgba(11, 29, 58, .48);
}

.region-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s4);
    padding: var(--s4) var(--s5) var(--s2);
}

.region-dialog-head h2 {
    margin: 0;
    font: 400 20px/1.3 var(--f-serif);
    letter-spacing: -.01em;
}

.dlg-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}

.dlg-x:hover {
    background: var(--bg);
    color: var(--ink);
}

.dlg-x .icon {
    width: 17px;
    height: 17px;
}

#region-map-frame {
    display: block;
    min-height: 280px;
    position: relative;
}

#region-map-frame[busy]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 32px;
    height: 32px;
    margin: -16px 0 0 -16px;
    border: 3px solid var(--line);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin .7s linear infinite;
}

.region-map-body {
    padding: 0 var(--s3) var(--s3);
    overflow-x: auto;
}

.region-map-body > svg {
    display: block;
    width: 100%;
    min-width: 860px;
    height: auto;
}

.region-map .hint {
    margin: 6px 4px 2px;
    font-size: 12px;
    color: var(--muted);
}

.region-map .far-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 10px 4px 0;
}

.region-map .far-label {
    font-size: 12px;
    color: var(--muted);
    margin-right: 2px;
}

.region-map .far-row .rg {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: var(--card);
    padding: 3px 11px;
    font-size: 12.5px;
    color: var(--ink);
    user-select: none;
}

.region-map .far-row .rg small { font-size: 10.5px; color: var(--muted); }
.region-map .far-row .rg:hover,
.region-map .far-row .rg:focus-visible { border-color: var(--accent); color: var(--accent); }
.region-map .far-row .rg.is-on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.region-map .far-row .rg.is-on small { color: rgba(255, 255, 255, .75); }
.region-map .far-row .rg.is-off:not(.is-on) { color: var(--muted); background: transparent; }
.region-map .far-row .rg.is-off:not(.is-on) small { color: var(--muted); }

.region-map .map-wildlife {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 10px 4px 0;
    padding-top: 10px;
    border-top: 1px dashed var(--line);
}

.region-map .wl-chip {
    display: inline-flex;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: var(--card);
    padding: 3px 11px;
    font-size: 12.5px;
    color: var(--ink);
}

.region-map .wl-chip:hover,
.region-map .wl-chip:focus-visible {
    border-color: var(--accent);
    color: var(--accent);
    text-decoration: none;
}

.region-map .panel { fill: #eaf2f7; stroke: var(--line); }
.region-map .land { fill: #dde8ee; stroke: #bfd2dd; stroke-width: 1.2; }
.region-map .isle { fill: #c6d8e2; stroke: #9fb9c9; stroke-width: 1; }
.region-map .crater { fill: #eaf2f7; }
.region-map .deco { fill: #a9bcc8; font-size: 11px; letter-spacing: .12em; }
.region-map .deco.big { font-size: 13px; }
.region-map .deco-line { fill: none; stroke: #c3d3dd; stroke-dasharray: 3 4; }
.region-map .inset-title { fill: var(--muted); font-size: 12.5px; font-weight: 600; }
.region-map text { font-size: 11px; fill: var(--ink); pointer-events: none; }
.region-map text.sm, .region-map .deco.sm { font-size: 9.5px; letter-spacing: 0; }
.region-map text .ct { font-size: 9px; font-weight: 700; fill: var(--muted); }

.region-map .rg { cursor: pointer; outline: none; }
.region-map .rg text { pointer-events: all; }
.region-map .rg .hit { fill: transparent; }
.region-map .rg .hitline { fill: none; stroke: transparent; stroke-width: 22; stroke-linecap: round; }
.region-map .rg .ring-hit { stroke-width: 12; }
.region-map .rg .lane-hit { stroke-width: 16; }
.region-map .rg .dot { fill: var(--accent); stroke: #fff; stroke-width: 1.5; }
.region-map .rg .zone { fill: var(--accent-soft); fill-opacity: .55; stroke: #aecbdd; stroke-dasharray: 4 3; }
.region-map .rg .shelf { fill: #f3f7fa; stroke: #aecbdd; stroke-dasharray: 4 3; }
.region-map .rg .lane { fill: none; stroke: #7ea8c4; stroke-width: 3; stroke-dasharray: 6 4; stroke-linecap: round; opacity: .7; }
.region-map .rg .armline { fill: none; stroke: var(--accent); stroke-width: 5; stroke-linecap: round; opacity: 0; }
.region-map .rg .latline { fill: none; stroke: #7ea8c4; stroke-width: 1.6; stroke-dasharray: 7 5; }
.region-map .rg .arm-hit { stroke-width: 26; }
.region-map .rg .chain-hit { stroke-width: 34; }

.region-map .rg:hover text, .region-map .rg:focus-visible text { fill: var(--accent); }
.region-map .rg:hover .dot { r: 6; }
.region-map .rg:hover .zone, .region-map .rg:focus-visible .zone { stroke: var(--accent); fill-opacity: .8; }
.region-map .rg:hover .isle { stroke: var(--accent); }
.region-map .rg:hover .clickland, .region-map .rg:focus-visible .clickland { fill: #cfe2ee; stroke: var(--accent); }
.region-map .rg:hover .armline { opacity: .35; }
.region-map .rg:hover .latline, .region-map .rg:hover .lane { stroke: var(--accent); opacity: 1; }
.region-map .rg:focus-visible .dot, .region-map .rg:focus-visible .isle { stroke: var(--accent); stroke-width: 2.5; }

.region-map .rg.is-on text { fill: var(--accent); font-weight: 700; }
.region-map .rg.is-on text .ct { fill: var(--accent); }
.region-map .rg.is-on .dot { r: 6.5; stroke: var(--accent); }
.region-map .rg.is-on .isle { fill: var(--accent); stroke: var(--accent); }
.region-map .rg.is-on .crater { fill: #fff; }
.region-map .rg.is-on .zone { fill: var(--accent); fill-opacity: .22; stroke: var(--accent); stroke-dasharray: none; }
.region-map .rg.is-on .shelf { stroke: var(--accent); stroke-dasharray: none; }
.region-map .rg.is-on .lane, .region-map .rg.is-on .latline { stroke: var(--accent); stroke-width: 4; opacity: 1; }
.region-map .rg.is-on .armline { opacity: .55; }
.region-map .rg.is-on .clickland { fill: #cfe2ee; stroke: var(--accent); stroke-width: 2; }

.region-map .rg.is-off:not(.is-on) { pointer-events: none; }
.region-map .rg.is-off:not(.is-on) text { fill: var(--muted); }
.region-map .rg.is-off:not(.is-on) .dot { fill: #b9c6cf; }
.region-map .rg.is-off:not(.is-on) .isle { fill: #d4dfe6; stroke: #c2d0d9; }
.region-map .rg.is-off:not(.is-on) .zone,
.region-map .rg.is-off:not(.is-on) .shelf { fill-opacity: .25; stroke: #ccdae3; }
.region-map .rg.is-off:not(.is-on) .lane { stroke: #b9c6cf; }

/* Dark-mode SVG chart palette for Polar Region Map */
html[data-theme="dark"] .region-dialog::backdrop { background: rgba(2, 8, 20, 0.72); }
html[data-theme="dark"] .region-map .panel { fill: #071426; stroke: var(--line); }
html[data-theme="dark"] .region-map .land { fill: #0F243E; stroke: #214066; }
html[data-theme="dark"] .region-map .isle { fill: #153152; stroke: #2C5380; }
html[data-theme="dark"] .region-map .crater { fill: #071426; }
html[data-theme="dark"] .region-map .deco { fill: #3E6084; }
html[data-theme="dark"] .region-map .deco-line { stroke: #1E3A5C; }
html[data-theme="dark"] .region-map .rg .dot { stroke: #071426; }
html[data-theme="dark"] .region-map .rg .zone { stroke: #2D5580; }
html[data-theme="dark"] .region-map .rg .shelf { fill: #0B1B30; stroke: #2D5580; }
html[data-theme="dark"] .region-map .rg .lane,
html[data-theme="dark"] .region-map .rg .latline { stroke: #3E6B96; }
html[data-theme="dark"] .region-map .rg:hover .clickland,
html[data-theme="dark"] .region-map .rg:focus-visible .clickland,
html[data-theme="dark"] .region-map .rg.is-on .clickland { fill: #17385E; }
html[data-theme="dark"] .region-map .rg.is-on .crater { fill: #0A192F; }
html[data-theme="dark"] .region-map .rg.is-off:not(.is-on) .dot { fill: #29415A; }
html[data-theme="dark"] .region-map .rg.is-off:not(.is-on) .isle { fill: #102238; stroke: #1D3550; }
html[data-theme="dark"] .region-map .rg.is-off:not(.is-on) .zone,
html[data-theme="dark"] .region-map .rg.is-off:not(.is-on) .shelf { stroke: #1E3650; }
html[data-theme="dark"] .region-map .rg.is-off:not(.is-on) .lane { stroke: #263E57; }

/* Active filter chips (<a> on voyage list, <button> on /ships) */
.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 14px;
}

.chips[hidden] {
    display: none;
}

.chips .chip {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--accent-soft);
    border: 0;
    color: var(--accent);
    border-radius: var(--r-pill);
    padding: 4px 12px;
    font: 400 13px/1.35 var(--f-sans);
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.chips .chip b {
    font-weight: 600;
}

.chips .chip:hover {
    text-decoration: none;
    background: var(--accent-soft-hover);
}

.chips .chip:focus-visible,
.chips .clear-all:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.chips .chip .x {
    font-weight: 700;
    opacity: .7;
}

.chips .clear-all {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: 0;
    padding: 0;
    font: var(--t-body);
    color: var(--muted);
    margin-left: 4px;
    cursor: pointer;
}

.chips .clear-all:hover {
    color: var(--accent);
    text-decoration: underline;
}

@media (max-width: 768px) {
    .chips {
        display: none;
    }
}

/* Meta row: per-page on left, view switch in center, sorting on right */
.meta-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    margin: 18px 0 12px;
}

.meta-row > .meta-left,
.meta-row > .meta-flank {
    justify-self: start;
    display: flex;
    align-items: center;
}

.meta-row > .meta-center,
.meta-row > .view-switch {
    justify-self: center;
    display: flex;
    align-items: center;
}

.meta-row > .meta-right,
.meta-row .meta-tools {
    justify-self: end;
    display: flex;
    align-items: center;
}

.results-h1 {
    margin: 0;
    font: var(--t-body);
    font-weight: 400;
    color: var(--muted);
}

.results-h1 .num {
    font-family: var(--f-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    font-size: 14px;
    color: var(--ink);
}

.meta-row .meta-tools {
    gap: var(--s4);
    flex-wrap: wrap;
}

.meta-count {
    font: var(--t-body);
    color: var(--muted);
    font-size: 14px;
}

.meta-count .num {
    font-family: var(--f-mono);
    font-weight: 600;
    color: var(--ink);
}

.meta-row .sorter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: var(--t-body);
    color: var(--muted);
    font-size: 13px;
}

.meta-row .sorter-label {
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}

.meta-row .sorter .combobox,
.meta-row .sorter select[data-controller~="select"]:not(.combobox-native) {
    width: auto;
    flex: 0 0 auto;
}

.meta-row .sorter .combobox-trigger,
.meta-row .sorter select[data-controller~="select"]:not(.combobox-native) {
    width: auto;
    background-color: var(--card);
}

.meta-row .sorter .combobox:not(.is-empty) .combobox-trigger:hover {
    background-color: var(--glass-ctrl-bg-hover);
    border-color: var(--glass-ctrl-border-hover);
}

.meta-row .per-page-sorter .combobox-trigger {
    min-width: 68px;
}

.meta-row .per-page-sorter .combobox-value {
    font-family: var(--f-mono);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 768px) {
    .meta-row {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: var(--s3);
        margin: 0 0 var(--s4);
    }
    .meta-row > .meta-center,
    .meta-row > .view-switch {
        order: 1;
        width: 100%;
    }
    .meta-row > .meta-left {
        order: 2;
    }
    .meta-row > .meta-right,
    .meta-row .meta-tools {
        order: 3;
    }
}