/* ============================================================================
   Anchor links — copy-link affordances + deep-link highlight
   Pairs with assets/javascripts/anchor-links.js, which gives every admonition
   an id (its hidden data-uuid) and injects .mb-anchor-copy buttons into
   admonition titles and headings.
   ============================================================================ */

:root {
  /* lucide/link-2 and lucide/check, used as masks so they pick up the
     surrounding colour (admonition type / heading state). */
  --mb-anchor-icon-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 17H7A5 5 0 0 1 7 7h2'/%3E%3Cpath d='M15 7h2a5 5 0 1 1 0 10h-2'/%3E%3Cline x1='8' x2='16' y1='12' y2='12'/%3E%3C/svg%3E");
  --mb-anchor-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Admonitions — an invisible click target over the icon gutter
   -------------------------------------------------------------------------- */

/* The theme draws the type icon as a masked ::before at left:0 inside the
   title (1rem box; steps 1.2rem), with a 1.6rem padding gutter. The button
   covers that gutter for the full title height — the icon itself stays a
   pseudo-element, the button just takes the hover/click. */
.md-typeset :is(.admonition-title, summary) > .mb-anchor-copy {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1.4rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
}

.md-typeset :is(.admonition-title, summary) > .mb-anchor-copy:focus-visible {
  outline: 2px solid var(--md-accent-fg-color);
  outline-offset: -2px;
  border-radius: 4px;
}

/* Hovering (or keyboard-focusing) the icon swaps it for the link icon —
   mask-image only, so the type's colour and size are kept. !important outruns
   the per-type and per-scheme mask rules in admonitions.css / the theme.
   :not(.mb-anchor-copied) hands over to the check the moment a copy lands —
   without it this rule out-specifies the copied one (the :has() clause) and
   the check would only appear once the cursor left the icon. */
.md-typeset :is(.admonition-title, summary):not(.mb-anchor-copied):has(> .mb-anchor-copy:hover)::before,
.md-typeset :is(.admonition-title, summary):not(.mb-anchor-copied):has(> .mb-anchor-copy:focus-visible)::before {
  -webkit-mask-image: var(--mb-anchor-icon-link) !important;
          mask-image: var(--mb-anchor-icon-link) !important;
}

/* …and for a moment after a successful copy, a check. (Class applied by the
   script; wins over the hover swap via its :not() guard.) */
.md-typeset :is(.admonition-title, summary).mb-anchor-copied::before {
  -webkit-mask-image: var(--mb-anchor-icon-check) !important;
          mask-image: var(--mb-anchor-icon-check) !important;
}

/* --------------------------------------------------------------------------
   Headings — a link icon to the right of the text, revealed on hover
   -------------------------------------------------------------------------- */

/* Headings have no type icon to take over, so the button itself is the icon
   (same masking trick — the mask colours via background-color). Hidden until
   the heading is hovered or the button is focused, like the theme's own
   headerlinks. */
.md-typeset :is(h1, h2, h3, h4, h5, h6) > .mb-anchor-copy--heading {
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  margin-left: 0.4em;
  padding: 0;
  border: 0;
  /* Optically centre the icon on the caps: drop it so its middle sits at
     half cap-height (~0.36em) rather than resting on the baseline. */
  vertical-align: -0.08em;
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
  background-color: var(--md-default-fg-color--light);
  -webkit-mask-image: var(--mb-anchor-icon-link);
          mask-image: var(--mb-anchor-icon-link);
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  opacity: 0;
  transition: opacity 150ms, background-color 125ms;
}

/* Reveal only after the cursor has rested on the heading for a moment —
   transition-delay applies per destination state, so hovering waits 1s
   (opacity only; background-color stays instant) while un-hovering hides
   promptly via the 0s base delay above. */
.md-typeset :is(h1, h2, h3, h4, h5, h6):hover > .mb-anchor-copy--heading {
  opacity: 1;
  transition-delay: 1s, 0s;
}

/* Keyboard focus and the post-copy check show immediately. (The hover rule
   above out-specifies these on transition-delay, but by then the button is
   already visible, so no opacity transition is pending.) */
.md-typeset .mb-anchor-copy--heading:focus-visible,
.md-typeset .mb-anchor-copy--heading.mb-anchor-copied {
  opacity: 1;
  transition-delay: 0s;
}

.md-typeset .mb-anchor-copy--heading:hover,
.md-typeset .mb-anchor-copy--heading:focus-visible {
  background-color: var(--md-accent-fg-color);
}

/* Post-copy feedback: the button's own icon becomes a check. */
.md-typeset .mb-anchor-copy--heading.mb-anchor-copied {
  -webkit-mask-image: var(--mb-anchor-icon-check);
          mask-image: var(--mb-anchor-icon-check);
}

/* --------------------------------------------------------------------------
   "✓ Copied!" toast — floats up from the clicked button and fades
   -------------------------------------------------------------------------- */

/* Spawned on <body> by the script at the button's fixed coordinates.
   transform centres it above the button; the rise is driven by the separate
   `translate` property so the two don't fight. */
.mb-anchor-toast {
  position: fixed;
  z-index: 5; /* above content, above the z-index:4 sticky header */
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  transform: translate(-50%, -130%);
  font-size: 0.7rem;
  font-weight: 700;
  /* Success green — same green as the new-addition admonitions
     (admonitions.css), legible on both schemes. */
  color: rgb(102, 187, 106);
  white-space: nowrap;
  pointer-events: none;
  animation: mb-anchor-toast-float 1.1s ease-out forwards;
}

.mb-anchor-toast svg {
  width: 1em;
  height: 1em;
}

@keyframes mb-anchor-toast-float {
  0%       { opacity: 0; translate: 0 0; }
  15%, 55% { opacity: 1; }
  100%     { opacity: 0; translate: 0 -1.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mb-anchor-toast {
    animation-name: mb-anchor-toast-fade; /* fade in place, no rise */
  }

  @keyframes mb-anchor-toast-fade {
    0%       { opacity: 0; }
    15%, 55% { opacity: 1; }
    100%     { opacity: 0; }
  }
}

/* --------------------------------------------------------------------------
   Deep-link arrival — sticky-header clearance + highlight flash
   -------------------------------------------------------------------------- */

/* Mirrors the theme's `:target` scroll margins (which don't apply here: the
   ids are assigned after navigation, so the browser never marks the element
   :target on initial load). */
.md-typeset .mb-anchor-target {
  scroll-margin-top: 3.6rem;
  animation: mb-anchor-flash 1.8s ease-out 1;
}

@media screen and (min-width: 76.25em) {
  .md-header--lifted ~ .md-container .md-typeset .mb-anchor-target {
    scroll-margin-top: 6rem;
  }
}

@keyframes mb-anchor-flash {
  0%, 35% { box-shadow: 0 0 0 3px var(--md-accent-fg-color); }
  100%    { box-shadow: 0 0 0 3px transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .md-typeset .mb-anchor-target {
    animation: none;
  }
}