/* V4 section navigation owns its offset below the shared site header. */
:root{--v4-site-header-height:88px;--v4-section-nav-height:64px}
.v4-section-nav{
  position:sticky;top:var(--v4-site-header-height);z-index:900;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;
  box-sizing:border-box;width:100%;margin:0 0 16px;padding:7px;
  border:1px solid #cbb594;border-radius:13px;background:#fffaf0;
  box-shadow:0 3px 0 #795a2914;
}
.v4-section-nav>a{
  display:flex;align-items:center;justify-content:center;gap:9px;
  box-sizing:border-box;min-width:0;min-height:48px;padding:7px 10px;
  border:1px solid transparent;border-radius:8px;
  background:transparent;color:#66523d;text-align:center;text-decoration:none;
  font-size:var(--ui-type-l4-size,14px);font-weight:700;line-height:1.3;
  transition:background-color .16s ease,border-color .16s ease,color .16s ease;
}
.v4-section-nav__number{
  flex:0 0 25px;display:grid;place-items:center;width:25px;height:25px;
  border:1px solid #cfb995;border-radius:50%;font-size:13px;
  background:#f5ead6;color:#80633e;
}
.v4-section-nav__label{min-width:0;word-break:keep-all}
.v4-section-nav__label small{display:block;font-size:inherit;font-weight:inherit}
.v4-section-nav>a:hover{background:#f5ecd9;border-color:#d4bb93}
.v4-section-nav>a[aria-current="location"]{background:#e9f0dd;border-color:#91a770;color:#3f592f;box-shadow:inset 0 -3px 0 #789253}
.v4-section-nav>a[aria-current="location"] .v4-section-nav__number{background:#58713e;border-color:#58713e;color:#fffdf7}
.v4-section-nav>a:focus-visible{outline:3px solid #b97535;outline-offset:2px}
:is(#v4Overview,#skillDamagePanel,#growthLab,#growthGuide){scroll-margin-top:calc(var(--v4-site-header-height) + var(--v4-section-nav-height) + 16px)}
@media(max-width:899px){:root{--v4-site-header-height:128px}}
@media(max-width:600px){
  .v4-section-nav{gap:3px;padding:5px;border-radius:10px}
  .v4-section-nav>a{min-height:47px;padding:5px 3px;font-size:12px;line-height:1.4;letter-spacing:-.025em}
  .v4-section-nav__number{display:none}
}
@media(prefers-reduced-motion:reduce){.v4-section-nav>a{transition:none}}
@media(forced-colors:active){.v4-section-nav>a[aria-current="location"]{border:2px solid Highlight}.v4-section-nav>a:focus-visible{outline-color:Highlight}}