/* ONLYDROP v377 — Persistent discipline navigation across Work categories.
   The switcher is a sibling of #work inside #views, never hidden with the Work panel. */

html body #views > .category-switcher {
  position: fixed !important;
  inset: 50% auto auto clamp(13px, 1.35vw, 24px) !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 10px 8px !important;
  width: clamp(125px, 12vw, 156px) !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(166,190,196,.22);
  border-left: 2px solid rgba(210,255,74,.45);
  background: rgba(9,14,17,.92);
  box-shadow: none !important;
  z-index: 80 !important;
  overflow: visible !important;
  pointer-events: auto !important;
}
/* No generated heading above the permanent discipline menu. */
html body #views > .category-switcher::before {
  content: none !important;
  display: none !important;
}
html body #views > .category-switcher > .filter {
  appearance: none;
  display: block !important;
  width: 100% !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 9px 10px !important;
  border: 1px solid rgba(163,191,195,.22) !important;
  border-left: 3px solid transparent !important;
  border-radius: 0 !important;
  color: #d9e1e2 !important;
  background: #121a20 !important;
  box-shadow: none !important;
  transform: none !important;
  rotate: 0deg !important;
  clip-path: none !important;
  text-align: left !important;
  font: 700 10px/1.3 'IBM Plex Mono',monospace !important;
  letter-spacing: .01em !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s !important;
}
html body #views > .category-switcher > .filter:hover {
  border-left-color: #d2ff4a !important;
  background: #202a2d !important;
  color: #fff !important;
}
html body #views > .category-switcher > .filter.active,
html body #views > .category-switcher > .filter[aria-pressed="true"] {
  background: #d2ff4a !important;
  color: #101618 !important;
  border-color: #d2ff4a !important;
  border-left-color: #d2ff4a !important;
  box-shadow: none !important;
}
html body #views > .category-switcher > .filter:focus-visible {
  outline: 2px solid #f6f1e8 !important;
  outline-offset: 2px;
}

/* On mobile the same switcher becomes one compact horizontal navigation rail.
   Keep the section header visible above, and reserve room for the rail. */
@media (max-width: 760px) {
  html body #views > .category-switcher {
    position: fixed !important;
    left: 4vw !important;
    right: 4vw !important;
    top: calc(121px + env(safe-area-inset-top, 0px)) !important;
    bottom: auto !important;
    transform: none !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    width: 92vw !important;
    max-width: 92vw !important;
    gap: 5px !important;
    padding: 6px !important;
    margin: 0 !important;
    border-left-width: 1px !important;
    background: rgba(9,14,17,.96);
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: thin;
    scrollbar-color: #9fca3e #131c20;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    z-index: 80 !important;
  }
  html body #views > .category-switcher::before {
    display: none !important;
  }
  html body #views > .category-switcher > .filter {
    flex: 0 0 auto !important;
    width: auto !important;
    min-height: 44px !important;
    min-width: 91px !important;
    max-width: 146px !important;
    padding: 8px 10px !important;
    font-size: 9px !important;
    line-height: 1.25 !important;
    text-align: center !important;
    white-space: normal !important;
    scroll-snap-align: start;
  }
  html body #views #work[data-cat] .work-section {
    padding-top: calc(202px + env(safe-area-inset-top, 0px)) !important;
  }
  html body #views #work .work-topline {
    top: calc(71px + env(safe-area-inset-top, 0px)) !important;
    left: 4vw !important;
    right: 4vw !important;
    gap: 8px;
  }
  html body #views #work .work-topline > * {
    padding: 10px 9px !important;
    font-size: 9px !important;
    letter-spacing: .045em !important;
  }
}

/* Small landscape phones: reduce the reserved band without hiding navigation. */
@media (max-width:760px) and (max-height:520px) {
  html body #views > .category-switcher {
    top: calc(83px + env(safe-area-inset-top, 0px)) !important;
  }
  html body #views #work[data-cat] .work-section {
    padding-top: calc(150px + env(safe-area-inset-top, 0px)) !important;
  }
  html body #views #work .work-topline {
    top: calc(25px + env(safe-area-inset-top, 0px)) !important;
  }
}

/* v377 — One persistent off-canvas menu. #views is the stationary viewport,
   whereas #work itself is swapped out on navigation to Home. The absolute
   menu is therefore continuously mounted in both routes and retains the
   exact old position relative to #views, including the mobile top offsets.
   It travels horizontally only when Work becomes active/inactive. */
html body #views > .category-switcher{
  position:absolute!important;
  visibility:visible!important;
  opacity:1!important;
  transform:translate(calc(-100% - 40px),-50%)!important;
  pointer-events:none!important;
  transition:transform 720ms cubic-bezier(.18,.85,.22,1)!important;
  will-change:transform;
  z-index:80!important;
}
html body #views:has(> #work.active):not(.od-home-ui-pending) > .category-switcher{
  transform:translate(0,-50%)!important;
  pointer-events:auto!important;
}
@media(max-width:760px){
  html body #views > .category-switcher{
    transform:translateX(calc(-100% - 8vw))!important;
  }
  html body #views:has(> #work.active):not(.od-home-ui-pending) > .category-switcher{
    transform:none!important;
  }
}
/* With FX disabled, or reduced motion requested, the menu remains
   functional but moves immediately rather than sliding. */
html.motion-paused body #views > .category-switcher{
  transition:none!important;
}
@media(prefers-reduced-motion:reduce){
  html body #views > .category-switcher{
    transition:none!important;
  }
}

/* v404: keep only the persistent discipline rail clickable while the rest
   of the site remains locked against interaction during a transition. */
html.p5-busy body #views:has(> #work.active) > .category-switcher,
html.p5-busy body #views:has(> #work.active) > .category-switcher > .filter{
  pointer-events:auto!important;
}