/* Desktop header tools — Figma 29:794. */
#arena-header-tools { display: none; }
@media (min-width: 901px) {
 #arena-header-tools {
  position: fixed; top: 24px;
  left: calc(max(40px, (100vw - 1800px) / 2) + 290px);
  right: 250px; z-index: 9999;
  display: flex; align-items: center; gap: 8px;
  height: 45px; pointer-events: none;
  font: 600 15px/1 Manrope, Arial, sans-serif;
 }
 #arena-breadcrumbs, #arena-header-search {
  box-sizing: border-box; height: 45px; margin: 0;
  border: 1px solid rgba(255,255,255,.06); border-radius: 100px;
  background: #111; pointer-events: auto;
 }
 #arena-breadcrumbs { flex: 0 0 auto; min-width: 0; max-width: calc(100% - 138px); padding: 0 16px; overflow: visible; }
 #arena-breadcrumbs ol { display: flex; align-items: center; height: 100%; gap: 4px; padding: 0; margin: 0; list-style: none; }
 #arena-breadcrumbs li { display: flex; align-items: center; min-width: 0; gap: 4px; }
 #arena-breadcrumbs li:last-child { flex: 0 1 auto; }
 #arena-breadcrumbs li + li::before { content: ""; flex: 0 0 16px; width: 16px; height: 16px; background: url("/images/header-chevron.svg") center no-repeat; transform: rotate(90deg); opacity: .4; }
 #arena-breadcrumbs a, #arena-breadcrumbs span { display: block; overflow: visible; white-space: nowrap; color: rgba(255,255,255,.6); text-decoration: none; font: inherit; }
 #arena-breadcrumbs [aria-current] { color: rgba(255,255,255,.4); }
 #arena-breadcrumbs a:hover { color: #fff; }
 #arena-header-search { display: flex; align-items: center; gap: 9px; flex: 0 1 392px; min-width: 130px; padding: 0 14px; }
 #arena-header-search button { display: grid; place-items: center; flex: 0 0 24px; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 4px; background: transparent; cursor: pointer; }
 #arena-header-search button img { display: block; width: 20px; height: 20px; opacity: .2; }
 #arena-header-search button:hover img { opacity: .6; }
 #arena-header-search input { box-sizing: border-box; flex: 1; min-width: 0; width: 100%; height: 100%; padding: 0; margin: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: #fff; font: 500 15px/1 Manrope, Arial, sans-serif; outline: none; }
 #arena-header-search input::placeholder { color: rgba(255,255,255,.2); opacity: 1; }
 #arena-header-search:focus-within { border-color: rgba(255,255,255,.3); }
 #arena-header-search button:focus-visible, #arena-breadcrumbs a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
}
@media (min-width: 901px) and (max-width: 1100px) {
 #arena-header-tools { right: 210px; }
}

/* Shared header backdrop: visual only; clicks pass through to page content. */
#arena-header-backdrop {
 position: fixed;
 inset: 0 0 auto;
 height: 160px;
 z-index: 998;
 background: linear-gradient(to bottom, rgba(0,0,0,.72) 0%, rgba(0,0,0,.4) 45%, rgba(0,0,0,0) 100%);
 pointer-events: none;
 user-select: none;
}

/* Animate the breadcrumb width; the adjacent search follows the flex layout. */
@media (min-width: 901px) {
 #arena-breadcrumbs.is-sized { transition: width var(--breadcrumb-duration, .18s) cubic-bezier(.22,.61,.36,1); }
}
@media (prefers-reduced-motion: reduce) {
 #arena-breadcrumbs.is-sized { transition: none; }
}

/* Keep complete labels readable, including unusually long paths. */
@media (min-width: 901px) {
 #arena-breadcrumbs ol { width: var(--breadcrumb-content-width, auto); }
 #arena-breadcrumbs.is-wrapped { height: auto; min-height: 45px; border-radius: 22px; padding-top: 12px; padding-bottom: 12px; }
 #arena-breadcrumbs.is-wrapped ol { height: auto; flex-wrap: wrap; row-gap: 6px; }
 #arena-breadcrumbs.is-wrapped a, #arena-breadcrumbs.is-wrapped span { white-space: normal; overflow-wrap: anywhere; line-height: 1.3; }
}

/* Native search clear controls: white at 60% opacity, with a click cursor. */
#arena-header-search input::-webkit-search-cancel-button,
.arena-search__form input::-webkit-search-cancel-button {
 -webkit-appearance: none;
 appearance: none;
 width: 14px;
 height: 14px;
 margin-left: 10px;
 cursor: pointer;
 opacity: .6;
 background:
  linear-gradient(45deg, transparent calc(50% - 1px), #fff calc(50% - 1px), #fff calc(50% + 1px), transparent calc(50% + 1px)),
  linear-gradient(-45deg, transparent calc(50% - 1px), #fff calc(50% - 1px), #fff calc(50% + 1px), transparent calc(50% + 1px));
}