/* HITUNE Design System — Navigation Master v1
   Theme values live in nightrun-theme.css. Layout/business routing remain local. */
.ht-nav{box-sizing:border-box;background:var(--ht-master-nav-bg);color:var(--ht-master-nav-text);border-color:var(--ht-master-nav-border)}
.ht-nav-item{box-sizing:border-box;display:flex;align-items:center;gap:9px;min-height:44px;padding:9px 12px;border:1px solid transparent;border-radius:var(--ht-master-nav-radius);color:var(--ht-master-nav-muted);text-decoration:none;cursor:pointer;transition:color var(--ht-master-motion-normal) var(--ht-master-motion-ease),background-color var(--ht-master-motion-normal) var(--ht-master-motion-ease),border-color var(--ht-master-motion-normal) var(--ht-master-motion-ease),transform var(--ht-master-motion-normal) var(--ht-master-motion-ease)}
.ht-nav-item:hover{color:var(--ht-master-nav-text);background:var(--ht-master-nav-hover-bg)}
.ht-nav-item[aria-current="page"],.ht-nav-item.is-active,.ht-nav-item.active{color:var(--ht-master-nav-active-ink);background:var(--ht-master-nav-active-bg);border-color:var(--ht-master-nav-active-border);transform:translateX(var(--ht-master-nav-selection-shift))}
.ht-nav-item:focus-visible{outline:2px solid var(--ht-master-focus);outline-offset:2px}
.ht-nav-divider{border-color:var(--ht-master-nav-border)}
@keyframes htNavPageEnter{
  from{opacity:0;transform:translate3d(var(--ht-master-nav-page-shift-x),var(--ht-master-nav-page-shift-y),0) scale(.995)}
  to{opacity:1;transform:translate3d(0,0,0) scale(1)}
}
.panel.ht-nav-page-enter{animation:htNavPageEnter var(--ht-master-nav-page-motion) var(--ht-master-motion-ease) both}
@media(prefers-reduced-motion:reduce){.ht-nav-item{transition:none;transform:none!important}.panel.ht-nav-page-enter{animation:none}}

/* Canonical application header chrome. Feature pages opt in with .ht-app-header. */
.ht-app-header{box-sizing:border-box;border-left:0;padding-left:0}
.ht-app-header-copy{min-width:0}
@media(max-width:700px){
  .ht-app-header{display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:9px;min-height:48px;margin-bottom:10px}
  .ht-app-header .portal-menu-button{align-self:center}
  .hitune-standalone .ht-app-header{display:block;min-height:46px;padding-left:4px;padding-right:54px}
}


/* Canonical guided-navigation emphasis states. */
#portalSidebarNavigation.portal-side-nav .ht-nav-item.customer-tutorial-next-nav,
.portal-bottom-nav [data-app-panel].customer-tutorial-next-nav{
  position:relative;
  z-index:3;
  color:var(--ht-master-nav-active);
  border-color:var(--ht-color-accent);
  background:color-mix(in srgb,var(--ht-color-accent) 24%,var(--ht-master-nav-active-bg));
  overflow:visible;
  animation:htNavTutorialNextPulse var(--ht-master-tour-nav-pulse-duration) var(--ht-master-tour-motion-ease) var(--ht-master-tour-nav-pulse-count);
}
#portalSidebarNavigation.portal-side-nav .ht-nav-item.customer-tutorial-next-nav .tab-copy{
  color:inherit;
  font-weight:800;
}
@keyframes htNavTutorialNextPulse{
  0%,100%{
    transform:scale(1);
    box-shadow:var(--ht-master-tour-nav-rest-shadow);
  }
  50%{
    transform:scale(var(--ht-master-tour-nav-pulse-scale));
    box-shadow:var(--ht-master-tour-nav-peak-shadow);
  }
}
#portalSidebarNavigation.portal-side-nav .ht-nav-item.customer-tutorial-destination-nav,
.portal-bottom-nav [data-app-panel].customer-tutorial-destination-nav{
  position:relative;
  z-index:2;
  color:var(--ht-master-nav-active);
  border-color:var(--ht-color-accent);
  background:color-mix(in srgb,var(--ht-color-accent) 22%,var(--ht-master-nav-active-bg));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb,var(--ht-color-accent) 82%,transparent),
    0 0 0 3px color-mix(in srgb,var(--ht-color-accent) 18%,transparent),
    0 8px 22px color-mix(in srgb,var(--ht-color-accent) 20%,transparent);
  transform:translateX(var(--ht-master-tour-nav-guide-offset)) scale(var(--ht-master-tour-nav-guide-scale));
  animation:htNavTutorialDestination var(--ht-master-tour-nav-guide-duration) var(--ht-master-tour-motion-ease);
  transition:
    color var(--ht-master-motion-normal) var(--ht-master-motion-ease),
    border-color var(--ht-master-motion-normal) var(--ht-master-motion-ease),
    background-color var(--ht-master-motion-normal) var(--ht-master-motion-ease),
    box-shadow var(--ht-master-motion-smooth) var(--ht-master-motion-ease),
    transform var(--ht-master-tour-motion-popover) var(--ht-master-tour-motion-ease);
}
#portalSidebarNavigation.portal-side-nav .ht-nav-item.customer-tutorial-destination-nav .tab-copy{
  font-weight:800;
}
@keyframes htNavTutorialDestination{
  0%{transform:translateX(0) scale(1);box-shadow:var(--ht-master-tour-nav-rest-shadow)}
  45%{transform:translateX(calc(var(--ht-master-tour-nav-guide-offset) + 1px)) scale(var(--ht-master-tour-nav-pulse-scale));box-shadow:var(--ht-master-tour-nav-peak-shadow)}
  100%{transform:translateX(var(--ht-master-tour-nav-guide-offset)) scale(var(--ht-master-tour-nav-guide-scale))}
}
@media(prefers-reduced-motion:reduce){
  #portalSidebarNavigation.portal-side-nav .ht-nav-item.customer-tutorial-next-nav,
  #portalSidebarNavigation.portal-side-nav .ht-nav-item.customer-tutorial-destination-nav,
  .portal-bottom-nav [data-app-panel].customer-tutorial-next-nav,
  .portal-bottom-nav [data-app-panel].customer-tutorial-destination-nav{
    animation:none;
    transform:none;
  }
}