/* v18.4 — light, deliberate hover feedback without moving the button frame. */
.dock-quiz,.primary-button[data-action=quiz]{position:relative;isolation:isolate;overflow:hidden;transition:background-color .25s ease,box-shadow .3s ease}
.dock-quiz>.ui-icon,.primary-button[data-action=quiz]>.ui-icon{transition:transform .35s cubic-bezier(.22,.61,.36,1)}
.dock-quiz:after,.primary-button[data-action=quiz]:after{content:"";position:absolute;inset:-50% auto -50% -60%;width:45%;background:linear-gradient(100deg,transparent,#ffffff2e,transparent);transform:translateX(-100%);pointer-events:none;opacity:0;z-index:-1}
.header-profile{transition:background-color .25s ease,color .25s ease,box-shadow .25s ease}
.header-profile>.ui-icon{transition:transform .25s ease}
.header .brand>img{transition:opacity .25s ease}
@media(hover:hover) and (pointer:fine){
 .dock-quiz:hover,.primary-button[data-action=quiz]:hover{background:#007cae;box-shadow:0 4px 16px #007bac30,inset 0 0 0 1px #ffffff24}
 .dock-quiz:hover:after,.primary-button[data-action=quiz]:hover:after{animation:quiz-sheen .85s ease-out both}
 .dock-quiz:hover>.ui-icon:first-child,.primary-button[data-action=quiz]:hover>.ui-icon:first-child{transform:translateY(-2px) scale(1.08)}
 .dock-quiz:hover>.dock-arrow,.primary-button[data-action=quiz]:hover>.ui-icon:last-child:not(:first-child){transform:translateX(3px)}
 .header-profile:hover{background:#e3f1f8;color:#006491;box-shadow:inset 0 0 0 1px #00649118}
 .header-profile:hover>.ui-icon{transform:translateY(-1px)}
 .header .brand:hover>img{opacity:.82}
}
@keyframes quiz-sheen{0%{opacity:0;transform:translateX(0)}20%{opacity:1}100%{opacity:0;transform:translateX(440%)}}
@media(prefers-reduced-motion:reduce){.dock-quiz,.primary-button[data-action=quiz],.dock-quiz>.ui-icon,.primary-button[data-action=quiz]>.ui-icon,.header-profile,.header-profile>.ui-icon,.header .brand>img{transition:none!important;transform:none!important}.dock-quiz:after,.primary-button[data-action=quiz]:after{animation:none!important;display:none}}

/* Preserve the capsule when a child gains its own hover/touch background. */
.smart-dock{overflow:hidden;isolation:isolate}
.smart-dock>.dock-quiz{border-radius:inherit}
.smart-dock:has(.repeat-trigger)>.dock-quiz{border-top-right-radius:0;border-bottom-right-radius:0}
.smart-dock>.repeat-trigger{border-top-right-radius:inherit;border-bottom-right-radius:inherit}
.header .brand>img,.header .brand:hover>img{transform:none!important}