/* sphinxcontrib-mermaid draws every diagram 500px tall. The stack diagram (fundamentals/stack.md)
   is taller than it is wide, so it takes its own height at the page's width instead. */
#stack-diagram > svg {
  height: auto;
}

/* On its own page (stack-diagram.md), the diagram fills the content area's width. Mermaid caps
   the SVG at its drawn width with an inline max-width, so lifting it needs !important. It sits
   apart from the lead above it. */
.stack-diagram-page {
  margin-top: 3rem;
}

.stack-diagram-page #stack-diagram > svg {
  width: 100%;
  max-width: none !important;
}

/* A diagram in a ::: {div} diagram-small block is drawn at 70% of the content width, centred, for
   small diagrams that would otherwise fill the screen, such as the data model's. */
.diagram-small svg {
  display: block;
  width: 70% !important;
  height: auto !important;
  margin: 0 auto;
}

/* Subgraph titles are bold and larger than the boxes inside them. Mermaid wraps them at 200px,
   with no setting for it, so the cap is lifted to keep each title on one line. The layout measures
   a title in a temporary node whose id is the bare subgraph id (boxes' ids start with "flowchart-"),
   then draws it in .cluster-label. Styling both the same way leaves the right room for it. */
.cluster-label foreignObject > div,
.nodes > .node:not([id^="flowchart-"]) > .label foreignObject > div {
  max-width: none !important;
  font-size: 1.2em;
  font-weight: bold;
}

/* A box whose label starts with a logo sets it to the left of the text, centered on it, so a
   two-line label (wrapped in a span) stays beside its logo. Once a label's images load, Mermaid
   sizes them inline (the label's full width, or 100px when the label has no text), so the
   logo's size needs !important. Mermaid measures the label after that, so the box fits. */
.nodeLabel p:has(> img) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
}

.nodeLabel img {
  flex: none;
  width: 1.2em !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 1.2em !important;
}

/* A wordmark stands in for a label's text, at its own width. */
.nodeLabel img.wordmark {
  width: auto !important;
  height: 1em !important;
}

/* A box whose logo is marked .hero, such as the stack diagram's data store, stands out: a large
   logo above a bold label kept on one line (Mermaid wraps labels at 200px), and a heavier
   outline. The outline's !important beats Mermaid's own rule, and the hover rule below still
   thickens it further. */
.node:has(img.hero) .label foreignObject > div {
  max-width: none !important;
}

.nodeLabel p:has(> img.hero) {
  flex-direction: column;
  gap: 0.15em;
  font-weight: bold;
}

.nodeLabel img.hero {
  width: 2.6em !important;
  height: 2.6em !important;
}

.node:has(img.hero) > .label-container {
  stroke-width: 2.5px !important;
}

/* A logo drawn in one color comes as a pair, .on-dark (white) and .on-light (black), and the box
   shows the one for the page's mode. */
html.dark .nodeLabel img.on-light,
html:not(.dark) .nodeLabel img.on-dark {
  display: none !important;
}

/* A node with a `click ... href` line is drawn as <a><g class="node clickable">. Its classDef
   sets fill and stroke inline with !important, which no stylesheet can override, so on hover or
   keyboard focus the border thickens and glows in the text color, and the label is underlined. */
.node.clickable > .label-container {
  transition: stroke-width 0.15s, filter 0.15s;
}

a:is(:hover, :focus-visible) > .node.clickable > .label-container {
  stroke-width: 3px !important;
  filter: drop-shadow(0 0 4px color-mix(in srgb, currentColor 70%, transparent));
}

a:is(:hover, :focus-visible) > .node.clickable .nodeLabel {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}