.spoiler {
  background-color: #444;
  color: #444;
  border-radius: 4px;
  padding: 0 4px;
  cursor: pointer;
}

/* Quarto-style .text-center helper: Quarto pages used this to center mermaid
   diagrams. text-align centers inline content (and inherits into the closed
   shadow root Zensical renders mermaid SVGs into); the flex rule on the
   mermaid container makes centering deterministic regardless of the SVG's
   computed display. */
.text-center {
  text-align: center;
}

.text-center .mermaid {
  display: flex;
  justify-content: center;
}

.spoiler.revealed {
  background: none;
  color: currentColor;
}

/* Instructor NOTES blocks (see PLAN.md H1): hidden by default,
   revealed only with ?docent=1. */
details.docent,
.admonition.docent {
  display: none;
}

body.show-docent details.docent,
body.show-docent .admonition.docent {
  display: block;
}

[data-termynal] {
  --color-bg: var(--md-code-bg-color);
  --color-text: var(--md-code-fg-color);
  --color-text-subtle: var(--md-default-fg-color--light);
  position: relative;
}

/* Copy button on Termynal blocks: same icon and color states as the regular
   code blocks (md-code__button): always visible but greyed out, brightening
   when the terminal is hovered, accent color on hover/focus of the button. */
.termynal-copy-btn {
  position: absolute;
  top: 0.25em;
  right: 0.25em;
  z-index: 1;
}

/* Zensical's "block hover" rule is written for the .highlight > .md-code__nav
   nesting; the Termynal button is a direct child of [data-termynal], so the
   two-level selector never matches and we mirror it here. The :not(:hover)
   keeps the accent color from the bundled .md-code__button:hover rule when
   the mouse is directly on the button. */
[data-termynal]:hover > .termynal-copy-btn:not(:hover) {
  background-color: var(--md-code-bg-color--light);
  color: var(--md-default-fg-color--light);
}

.termynal-copy-btn:focus-visible {
  color: var(--md-accent-fg-color);
}