/* Section highlight: when a link lands a reader on a section of the handbook
   (a "Read in the handbook" link from Recent Updates or the Changelog, or any
   shared #anchor), the section heading lights up for a few seconds so the
   reader sees which passage the link meant. Bryan asked for this on
   9 October 2026. Identical in all four handbooks; canonical copy
   handbook-recursive/kit/styles/section-highlight-v1.css. Published
   stylesheets are immutable; future changes need a new version. */

:root {
  --hb-target-ink: #fde68a;
  --hb-target-bar: #c9a961;
}

.quarto-dark,
[data-bs-theme="dark"] {
  --hb-target-ink: rgba(250, 204, 21, 0.32);
  --hb-target-bar: #facc15;
}

/* Quarto wraps each heading in a <section id>; the heading carries the mark.
   Standalone anchors on paragraphs, list items, and tables light up directly. */
section:target > h1,
section:target > h2,
section:target > h3,
section:target > h4,
section:target > h5,
h1:target,
h2:target,
h3:target,
h4:target,
h5:target,
p:target,
li:target,
blockquote:target,
table:target,
div:target > :is(h1, h2, h3, h4, h5, p):first-child {
  animation: hb-target-flash 4.5s ease-out 1 both;
  border-radius: 0.2rem;
}

@keyframes hb-target-flash {
  0%,
  40% {
    background-color: var(--hb-target-ink);
    box-shadow: 0 0 0 0.45rem var(--hb-target-ink), inset 0.25rem 0 0 var(--hb-target-bar);
  }
  100% {
    background-color: transparent;
    box-shadow: 0 0 0 0.45rem transparent, inset 0.25rem 0 0 transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  section:target > h1,
  section:target > h2,
  section:target > h3,
  section:target > h4,
  section:target > h5,
  h1:target,
  h2:target,
  h3:target,
  h4:target,
  h5:target,
  p:target,
  li:target,
  blockquote:target,
  table:target,
  div:target > :is(h1, h2, h3, h4, h5, p):first-child {
    animation: none;
    background-color: var(--hb-target-ink);
    box-shadow: 0 0 0 0.45rem var(--hb-target-ink), inset 0.25rem 0 0 var(--hb-target-bar);
  }
}

@media print {
  section:target > h1,
  section:target > h2,
  section:target > h3,
  h2:target,
  h3:target,
  p:target {
    animation: none;
    background-color: transparent;
    box-shadow: none;
  }
}