/* Shared semantic feedback. Geometry, navigation and progress remain owned by
   the existing component styles and scripts. */
:root{
 --motion-fast:160ms;
 --motion-base:180ms;
 --motion-project-index:200ms;
 --motion-ease:cubic-bezier(.2,.7,.2,1);
}
.site-header>nav[aria-label="Primary navigation"] a,
.site-header>.wordmark{position:relative;transition:color var(--motion-fast) var(--motion-ease)}
.site-header>nav[aria-label="Primary navigation"] a::after,
.site-header>.wordmark::after{
 content:"";position:absolute;pointer-events:none;
 left:var(--menu-rule-inset,0px);right:var(--menu-rule-inset,0px);
 top:calc(50% + .5em + 3px);height:1px;background:var(--signal);
 transform:scaleX(0);transform-origin:left center;
 transition:transform var(--motion-fast) var(--motion-ease);
}
.site-header>.wordmark::after{left:0;right:auto;width:14px}
.site-header>nav[aria-label="Primary navigation"] a:focus-visible::after,
.site-header>.wordmark:focus-visible::after{transform:scaleX(1);transition-duration:var(--motion-base)}
.site-header>nav[aria-label="Primary navigation"] a:focus-visible,
.site-header>.wordmark:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.site-header>.wordmark:focus-visible::after{transition-duration:var(--motion-fast)}
@media(hover:hover) and (pointer:fine){
 .site-header>nav[aria-label="Primary navigation"] a:hover::after,
 .site-header>.wordmark:hover::after{transform:scaleX(1);transition-duration:var(--motion-base)}
 .site-header>.wordmark:hover::after{transition-duration:var(--motion-fast)}
}
@media(max-width:800px){
 .site-header>nav[aria-label="Primary navigation"] a{--menu-rule-inset:6px}
 .site-header>nav[aria-label="Primary navigation"] a:active::after{transform:scaleX(1)}
}
/* Current remains green and bold. Hover is full-contrast neutral with a local
   1px rule on the existing progress baseline, never a progress calculation. */
@media(min-width:801px){
 .site-header .chapter-nav ol{z-index:1}
 .site-header .chapter-nav a{transition:color var(--motion-base) var(--motion-ease),opacity var(--motion-base) var(--motion-ease)}
 .site-header .chapter-nav a::after{
  content:"";position:absolute;pointer-events:none;z-index:1;
  left:50%;top:47px;width:22px;height:1px;background:var(--signal);
  opacity:0;transform:translateX(-50%) scaleX(.363636);transform-origin:center;
  transition:transform var(--motion-base) var(--motion-ease),opacity var(--motion-fast) var(--motion-ease);
 }
 .site-header .chapter-nav a[aria-current="page"]{color:var(--signal);opacity:1}
 .site-header .chapter-nav a[aria-current="page"]::after{opacity:1;transform:translateX(-50%);height:2px}
 .site-header .chapter-nav a:focus-visible{opacity:1;outline:2px solid currentColor;outline-offset:1px}
 .site-header .chapter-nav a:focus-visible::after{opacity:1;transform:translateX(-50%)}
 @media(hover:hover) and (pointer:fine){
  .site-header .chapter-nav a:hover{opacity:1}
  .site-header .chapter-nav a:hover::after{opacity:1;transform:translateX(-50%)}
 }
}
/* The existing 6px current marker keeps its footprint. Its visible equivalent
   is an 18px rule below the number, before the title, inside existing space. */
body[data-project] .project-index a{transition:color var(--motion-project-index) var(--motion-ease)}
body[data-project] .project-index a[aria-current="page"]::after{visibility:hidden}
body[data-project] .project-index a>span:first-child{position:relative;transition:color var(--motion-project-index) var(--motion-ease)}
body[data-project] .project-index a>span:first-child::after{
 content:"";position:absolute;left:0;top:calc(100% + 3px);width:18px;height:1px;
 background:var(--signal);pointer-events:none;transform:scaleX(0);transform-origin:left center;
 transition:transform var(--motion-project-index) var(--motion-ease);
}
body[data-project] .project-index a .project-index__name{transition:transform var(--motion-project-index) var(--motion-ease)}
body[data-project] .project-index a[aria-current="page"]>span:first-child,
body[data-project] .project-index a:focus-visible>span:first-child{color:var(--signal)}
body[data-project] .project-index a[aria-current="page"]>span:first-child::after,
body[data-project] .project-index a:focus-visible>span:first-child::after{transform:scaleX(1)}
body[data-project] .project-index a:not([aria-current="page"]):focus-visible .project-index__name{transform:translateX(4px)}
body[data-project] .project-index a:focus-visible{outline:2px solid currentColor;outline-offset:4px}
@media(hover:hover) and (pointer:fine){
 body[data-project] .project-index a:hover>span:first-child{color:var(--signal)}
 body[data-project] .project-index a:hover>span:first-child::after{transform:scaleX(1)}
 body[data-project] .project-index a:not([aria-current="page"]):hover .project-index__name{transform:translateX(4px)}
}
@media(hover:none){
 body[data-project] .project-index a:active>span:first-child{color:var(--signal)}
 body[data-project] .project-index a:active>span:first-child::after{transform:scaleX(1)}
}
@media(prefers-reduced-motion:reduce){
 .site-header>nav[aria-label="Primary navigation"] a,
 .site-header>nav[aria-label="Primary navigation"] a::after,
 .site-header>.wordmark,.site-header>.wordmark::after,
 .site-header .chapter-nav a,.site-header .chapter-nav a::after,
 body[data-project] .project-index a,
 body[data-project] .project-index a>span,
 body[data-project] .project-index a>span::after{transition:none}
 body[data-project] .project-index a .project-index__name{transform:none!important;transition:none}
}
@media(forced-colors:active){
 .site-header>nav[aria-label="Primary navigation"] a::after,
 .site-header>.wordmark::after,.site-header .chapter-nav a::after,
 body[data-project] .project-index a>span:first-child::after{background:Highlight}
}