/* Horizontal navigation exposes both its direction controls and its scrollbar.
   The same links still work when JavaScript is unavailable. */
.horizontal-nav { min-width: 0; max-width: 100%; }
.horizontal-nav.is-overflowing { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); }
.horizontal-nav-frame { position: relative; min-width: 0; }
.horizontal-nav-arrow { display: grid; place-items: center; flex: none; width: calc(var(--space-6) + var(--space-3)); height: calc(var(--space-6) + var(--space-3)); padding: 0; border: .0625rem solid var(--line-strong); border-radius: var(--pill); background: var(--card); color: var(--ink); box-shadow: var(--shadow-sm); cursor: pointer; }
.horizontal-nav-arrow:hover { border-color: var(--brand); color: var(--brand-dark); background: var(--brand-tint); }
.horizontal-nav-arrow:focus-visible { outline: .125rem solid var(--brand); outline-offset: .125rem; }
.horizontal-nav-arrow:disabled { color: var(--muted-soft); border-color: var(--line); background: var(--bg); box-shadow: none; cursor: default; }
.horizontal-nav-arrow[hidden] { display: none !important; }
.horizontal-nav [data-horizontal-nav-target~="viewport"] { min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--line-strong) var(--bg); }
.horizontal-nav [data-horizontal-nav-target~="viewport"]::-webkit-scrollbar { display: block; height: var(--space-2); }
.horizontal-nav [data-horizontal-nav-target~="viewport"]::-webkit-scrollbar-track { background: var(--bg); border-radius: var(--pill); }
.horizontal-nav [data-horizontal-nav-target~="viewport"]::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--pill); }
.horizontal-nav-frame::before, .horizontal-nav-frame::after { content: ''; position: absolute; top: 0; bottom: var(--space-2); z-index: 1; width: var(--space-4); pointer-events: none; opacity: 0; }
.horizontal-nav-frame::before { left: 0; background: linear-gradient(to right, var(--card), transparent); }
.horizontal-nav-frame::after { right: 0; background: linear-gradient(to left, var(--card), transparent); }
.horizontal-nav.can-scroll-back .horizontal-nav-frame::before, .horizontal-nav.can-scroll-forward .horizontal-nav-frame::after { opacity: 1; }
.horizontal-nav--settings { margin-bottom: var(--space-6); }
.horizontal-nav--settings .subnav { margin-bottom: 0; }
/* Four live-order filters remain immediately visible, including on phones.
   They intentionally wrap instead of hiding an action in a scrolling region. */
.operator-page .board-filters { flex-wrap: wrap; overflow-x: visible; }
@media (max-width: 51.1875rem) {
    .operator-page .bfilter-div { display: none; }
    .horizontal-nav--settings { margin-bottom: var(--space-5); }
    .horizontal-nav--categories .crail-name { overflow: visible; text-overflow: clip; }
}