/* Hover for the static guides (no build step here, so the tokens from
   src/hover.css are repeated). Linked last in each page's <head>, so these
   win over the page's own rules on order. Motion uses translate/scale, never
   transform, so it composes with the inline transforms the pages set. */
:root{--mw-ease:cubic-bezier(.2,.8,.2,1);--mw-hover-dur:200ms;--mw-hover-lift:-3px;--mw-hover-lift-sm:-2px;--mw-hover-nudge:3px;--mw-press-scale:.97;--mw-hover-shadow:0 18px 36px -20px rgba(33,25,42,.42);--mw-hover-shadow-sm:0 10px 22px -14px rgba(33,25,42,.45);
--mw-hover-t:translate var(--mw-hover-dur) var(--mw-ease),scale var(--mw-hover-dur) var(--mw-ease),box-shadow var(--mw-hover-dur) var(--mw-ease),background-color var(--mw-hover-dur) var(--mw-ease),border-color var(--mw-hover-dur) var(--mw-ease),color var(--mw-hover-dur) var(--mw-ease)}

/* pill links and buttons */
.navp,a[href^="/"][style*="border-radius:999px"],.copyb,.dd-prev,.dd-next,.dd-pill,.g-card,.pl-card,a[href^="/"] svg{transition:var(--mw-hover-t)}
.navp:active,a[href^="/"][style*="border-radius:999px"]:active,.copyb:active,.dd-prev:active,.dd-next:active{scale:var(--mw-press-scale)}

/* footer links: an underline that slides in under the words */
footer nav a{background:linear-gradient(currentColor,currentColor) 0 calc(50% + .75em)/0 1px no-repeat;background-origin:content-box;background-clip:content-box;transition:background-size 240ms var(--mw-ease),color var(--mw-hover-dur) var(--mw-ease)}
footer nav a:focus-visible{background-size:100% 1px}

/* The guide cards used to tilt on hover; they lift straight up now. */
.g-card:hover{transform:none}

@media (hover:hover) and (pointer:fine){
  footer nav a:hover{background-size:100% 1px}
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .navp:hover,a[href^="/"][style*="border-radius:999px"]:hover,.copyb:hover,.dd-prev:hover,.dd-next:hover{translate:0 var(--mw-hover-lift-sm);box-shadow:var(--mw-hover-shadow-sm)}
  a[href^="/"][style*="border-radius:999px"]:hover svg{translate:var(--mw-hover-nudge) 0}
  .navp:active,a[href^="/"][style*="border-radius:999px"]:active{translate:0 0}
  .dd-pill:hover{translate:0 var(--mw-hover-lift-sm)}
  .g-card:hover{translate:0 -4px;box-shadow:var(--mw-hover-shadow)}
  .pl-card:hover{translate:0 var(--mw-hover-lift-sm);box-shadow:var(--mw-hover-shadow-sm)}
}
@media (prefers-reduced-motion:reduce){
  .navp:active,a[href^="/"][style*="border-radius:999px"]:active,.copyb:active,.dd-prev:active,.dd-next:active{scale:none}
  footer nav a{transition:none}
}

/* Step padding, copy size and figures live in figures.css, written by
   scripts/build-guide-layout.mjs together with the step markup. */
#faq .mw-faq-question{display:flex;align-items:center;justify-content:space-between;gap:18px;cursor:pointer}
#faq .mw-faq-arrow{flex:none;transition:transform 180ms ease}
#faq .mw-faq-question[aria-expanded="true"] .mw-faq-arrow{transform:rotate(180deg)}
#faq .mw-faq-question:focus-visible{outline:3px solid #7f98e6;outline-offset:4px;border-radius:8px}
#faq p[hidden]{display:none !important}
@media(prefers-reduced-motion:reduce){#faq .mw-faq-arrow{transition:none}}