/* One small hand-drawn arrow across static pages and dynamic resource lists. */
.site-arrow {
  display:inline-block;
  width:1.375rem;
  height:1.375rem;
  flex:0 0 1.375rem;
  vertical-align:-.3em;
  color:var(--site-arrow-color,#ac2f63);
  background:currentColor;
  -webkit-mask:url('/assets/doodle-arrow.svg') center/contain no-repeat;
  mask:url('/assets/doodle-arrow.svg') center/contain no-repeat;
  pointer-events:none;
}
.site-arrow--right{transform:rotate(45deg)}
.site-arrow--down{transform:rotate(135deg)}
.site-arrow--left{transform:rotate(225deg)}
.site-arrow--up{transform:rotate(-45deg)}
.resource-link .site-arrow{margin-top:.15em}
.guide-jump{align-items:center}
.pagination button{display:inline-flex;align-items:center;gap:.4rem}

/* Colour follows the surface, including nested buttons and hover states. */
:where(.learning-brain-feature,.next-step,.compare,#contact,.text-poster){--site-arrow-color:#fff}
:where(.profile-art,.offer-card,.qa-feature,.category-group-head,.step-list li,.source-posts li){--site-arrow-color:#111}
.learning-brain-feature{--site-arrow-color:#fff}
.button,.guide-button,.reply,.telegram,a.resource-action{--site-arrow-color:#111}
.source-posts a.resource-action{--site-arrow-color:#ac2f63}
.cs-resources .section-links a.resource-action{--site-arrow-color:#fff}
.reply:hover,.guide-button:hover{--site-arrow-color:currentColor}
@media(hover:hover){
  .button:hover,a.resource-action:hover{--site-arrow-color:currentColor}
}
@media(forced-colors:active){
  .site-arrow{color:LinkText;forced-color-adjust:none}
}