/* Page header: stack the action buttons (copy + prev/next) on their own row
   above the title instead of sharing the title's line. The theme renders
   #page-header as a horizontal flex (title left, buttons pinned top-right),
   which makes long titles wrap awkwardly around the buttons. */
#page-header {
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
}
/* Target the button group (the flex row of Copy + prev/next buttons)
   specifically, rather than all direct <div> children, so a future sibling div
   (breadcrumbs, tag row, banner) isn't accidentally reordered or right-aligned. */
#page-header > div.flex {
  order: -1;
  justify-content: flex-end;
  padding-top: 0;
}

html.dark .mermaid svg text {
  fill: white;
}

html.dark .mermaid svg line[stroke="black"] {
  stroke: white !important;
}

html.dark .mermaid svg marker#arrowhead path {
  fill: white !important;
}

html.dark .mermaid svg .edgePaths path {
  stroke: #aaaaaa !important;
}

html.dark .mermaid svg .arrowMarkerPath {
  fill: #aaaaaa !important;
  stroke: #aaaaaa !important;
}