/* ATEC Mobility – rail page glass sticky header (2026-10-30)
   Both the brand/tools row and checklist/photo navigation share one surface. */
.header {
  position: sticky;
  top: 0;
  z-index: 30;
  background-color: rgba(248, 249, 251, .70);
  background-image: linear-gradient(115deg,
    rgba(255, 255, 255, .20) 0%,
    rgba(239, 243, 248, .13) 62%,
    rgba(255, 233, 242, .12) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(155%);
  backdrop-filter: blur(14px) saturate(155%);
  border-bottom: 1px solid rgba(171, 179, 191, .38);
  box-shadow: 0 6px 22px rgba(34, 42, 54, .09),
              inset 0 1px rgba(255, 255, 255, .52);
}

/* Prevent opaque tab buttons from covering the frosted surface. */
.header .workNav { background: transparent; }
.header .workNav .nav {
  background: transparent;
  color: #414b58;
  border-bottom-color: transparent;
  font-weight: 700;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.header .workNav .nav:hover {
  background: rgba(255, 255, 255, .26);
}
.header .workNav .nav.active {
  color: #c60049;
  background: linear-gradient(to top, rgba(215, 0, 81, .075), transparent 65%);
  border-bottom-color: #d70051;
}
.header .brandService { color: #52606d; }
.headerTools .headerSearch {
  background: rgba(255, 248, 251, .69);
  border-color: rgba(215, 0, 81, .17);
}
.headerTools .accountButton {
  background: rgba(246, 248, 251, .65);
  border: 1px solid rgba(203, 209, 217, .38);
}
.headerTools .headerSearch:hover,
.headerTools .accountButton:hover {
  background: rgba(255, 255, 255, .88);
}

@media (max-width: 1050px) {
  /* A fine separator preserves the two-row mobile layout without a solid band. */
  .header .workNav {
    border-top: 1px solid rgba(255, 255, 255, .43);
  }
}
@media (max-width: 640px) {
  .header {
    background-color: rgba(247, 248, 251, .72);
    box-shadow: 0 7px 20px rgba(26, 34, 47, .105),
                inset 0 1px rgba(255, 255, 255, .48);
  }
}
/* Accessibility and browsers without background blur support. */
@media (prefers-reduced-transparency: reduce) {
  .header {
    background-color: rgba(250, 251, 253, .97);
    background-image: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .header { background-color: rgba(249, 250, 252, .97); }
}
@media (prefers-reduced-motion: reduce) {
  .header .workNav .nav { transition: none; }
}