/* Apex shared icon system — one thin round-line arrow language for every page.
   Loaded after each page's component CSS so existing .icon-arrow spans inherit
   the shape. currentColor masks, 24px grid, 2.4-unit stroke (~1.8px at 18px),
   round caps and joins. Direction modifiers: --forward (default), --back,
   --external (diagonal up-right). */
:root{
  --icon-arrow-forward:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12h15m-6.25-6.25L19.5 12l-6.25 6.25' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --icon-arrow-back:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.5 12h-15m6.25-6.25L4.5 12l6.25 6.25' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --icon-arrow-external:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.75 17.25 17.25 6.75M8.75 6.75h8.5v8.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.icon-arrow{display:inline-block;flex:0 0 auto;width:18px;height:18px;background:currentColor;-webkit-mask:var(--icon-arrow-forward) center/contain no-repeat;mask:var(--icon-arrow-forward) center/contain no-repeat}
.icon-arrow--forward{-webkit-mask-image:var(--icon-arrow-forward);mask-image:var(--icon-arrow-forward)}
.icon-arrow--back{-webkit-mask-image:var(--icon-arrow-back);mask-image:var(--icon-arrow-back)}
.icon-arrow--external{-webkit-mask-image:var(--icon-arrow-external);mask-image:var(--icon-arrow-external)}
.icon-arrow--back,.icon-arrow--external{transition:transform .3s var(--ease,cubic-bezier(.16,1,.3,1))}
@media(hover:hover){
  a:hover .icon-arrow--back,button:hover .icon-arrow--back{transform:translateX(-3px)}
  a:hover .icon-arrow--external,button:hover .icon-arrow--external{transform:translate(2px,-2px)}
}
a:focus-visible .icon-arrow--back,button:focus-visible .icon-arrow--back{transform:translateX(-3px)}
a:focus-visible .icon-arrow--external,button:focus-visible .icon-arrow--external{transform:translate(2px,-2px)}
@media(hover:none){
  a:hover .icon-arrow,button:hover .icon-arrow{transform:none!important}
}
@media(prefers-reduced-motion:reduce){
  .icon-arrow{transition:none!important}
  a:hover .icon-arrow,button:hover .icon-arrow,a:focus-visible .icon-arrow,button:focus-visible .icon-arrow{transform:none!important}
}