/* HENDAR UALL-V88 — context navigation icon safety.
 * The horizontal scrollbar owns a dedicated vertical lane so module tabs,
 * icon tiles, shadows and focus rings are never cropped.
 */

:root{
  --hendar-context-tab-height:52px;
  --hendar-context-icon-size:32px;
  --hendar-context-scrollbar-height:6px;
}

#contextSubnav.context-subnav{
  box-sizing:border-box!important;
  height:auto!important;
  min-height:86px!important;
  max-height:none!important;
  padding-block:6px!important;
  overflow:visible!important;
}

#contextSubnav .context-subnav-items{
  box-sizing:border-box!important;
  height:auto!important;
  min-height:72px!important;
  padding-block:4px!important;
  align-items:center!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  overscroll-behavior-inline:contain!important;
  scrollbar-width:thin!important;
  scrollbar-color:color-mix(in srgb,var(--af-muted,#718695) 48%,transparent) transparent!important;
}

#contextSubnav .context-subnav-items::-webkit-scrollbar{
  height:var(--hendar-context-scrollbar-height)!important;
}
#contextSubnav .context-subnav-items::-webkit-scrollbar-track{
  background:transparent!important;
}
#contextSubnav .context-subnav-items::-webkit-scrollbar-thumb{
  min-width:48px!important;
  border:0!important;
  border-radius:999px!important;
  background:color-mix(in srgb,var(--af-muted,#718695) 42%,transparent)!important;
}

#contextSubnav .context-subnav-item{
  box-sizing:border-box!important;
  grid-template-columns:var(--hendar-context-icon-size) minmax(0,1fr)!important;
  height:var(--hendar-context-tab-height)!important;
  min-height:var(--hendar-context-tab-height)!important;
  padding-block:6px!important;
  overflow:visible!important;
}
#contextSubnav .context-subnav-item:hover{
  transform:none!important;
}
#contextSubnav .context-subnav-item.active{
  box-shadow:inset 0 -4px 0 var(--tone,var(--af-navy)),0 1px 3px color-mix(in srgb,var(--tone,var(--af-navy)) 16%,transparent)!important;
}
#contextSubnav .context-subnav-item:focus-visible{
  outline:3px solid color-mix(in srgb,var(--tone,var(--af-navy)) 35%,transparent)!important;
  outline-offset:-4px!important;
}

#contextSubnav .context-subnav-icon{
  box-sizing:border-box!important;
  display:grid!important;
  place-items:center!important;
  width:var(--hendar-context-icon-size)!important;
  min-width:var(--hendar-context-icon-size)!important;
  max-width:var(--hendar-context-icon-size)!important;
  height:var(--hendar-context-icon-size)!important;
  min-height:var(--hendar-context-icon-size)!important;
  max-height:var(--hendar-context-icon-size)!important;
  padding:5px!important;
  line-height:0!important;
  overflow:visible!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.82),0 1px 2px rgba(15,42,67,.11)!important;
}
#contextSubnav .context-subnav-icon svg{
  display:block!important;
  width:18px!important;
  height:18px!important;
  max-width:100%!important;
  max-height:100%!important;
  overflow:visible!important;
  shape-rendering:geometricPrecision!important;
}
#contextSubnav .context-subnav-item.active .context-subnav-icon{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 1px 2px color-mix(in srgb,var(--tone,var(--af-navy)) 26%,transparent)!important;
}

@media(max-width:1100px){
  :root{
    --hendar-context-tab-height:50px;
    --hendar-context-icon-size:30px;
  }
  #contextSubnav.context-subnav{
    min-height:80px!important;
    padding-block:5px!important;
  }
  #contextSubnav .context-subnav-items{
    min-height:68px!important;
    padding-block:3px!important;
  }
  #contextSubnav .context-subnav-item{padding-block:5px!important}
  #contextSubnav .context-subnav-icon{padding:5px!important}
  #contextSubnav .context-subnav-icon svg{width:17px!important;height:17px!important}
}

@media(max-width:640px){
  :root{
    --hendar-context-tab-height:48px;
    --hendar-context-icon-size:28px;
  }
  #contextSubnav.context-subnav{
    min-height:76px!important;
    padding-block:5px!important;
  }
  #contextSubnav .context-subnav-items{
    min-height:64px!important;
    padding-block:2px!important;
  }
  #contextSubnav .context-subnav-item{padding-block:5px!important}
  #contextSubnav .context-subnav-icon{padding:5px!important}
  #contextSubnav .context-subnav-icon svg{width:16px!important;height:16px!important}
}

@media(prefers-reduced-motion:reduce){
  #contextSubnav .context-subnav-item{transform:none!important}
}

@media print{
  #contextSubnav.context-subnav{display:none!important}
}