/* Docs site (markdown-backed). Three-column layout on lg+, single
   column on narrow. All colors come from Phoenix CSS variables so
   light/dark theme parity is automatic. */

:root {
  --docs-sidebar-width: 17rem;
  --docs-sidebar-width-xl: 14rem;
  --docs-onthispage-width: 13rem;
  --docs-content-max: 75ch;
}

.docs-body {
  background: var(--phoenix-body-bg);
  color: var(--phoenix-body-color);
}

/* ---------- Top nav ----------
   No `backdrop-filter` here on purpose: when set, the navbar becomes a
   containing block for absolutely-positioned descendants, which puts the
   theme-toggle and profile dropdown menus in the wrong coordinate space
   and they end up hidden / off-screen. */
.docs-topnav {
  position: sticky;
  top: 0;
  z-index: 1030;
}
/* Dropdown menus inside the docs navbar must paint above the sticky bar. */
.docs-topnav .dropdown-menu {
  z-index: 1031;
}

/* Like the home navbar, the docs navbar doesn't carry Phoenix's
   `.navbar-top` padding, so the profile dropdown's caret and ring sit
   right on top of the avatar. Nudge it down so both have room. */
.docs-topnav .dropdown-profile-compact {
  margin-top: 0.75rem;
}

/* On narrow screens the action cluster (theme toggle, plan badge,
   user menu) still renders, but the plan-badge tier name would push
   the navbar wide. Keep just the medallion at xs; restore the full
   badge from sm up. */
@media (max-width: 575.98px) {
  .docs-topnav-actions .docs-topnav-actions__hide-xs,
  .docs-topnav-actions h6 {
    display: none !important;
  }
}

/* Belt-and-braces: never grow a horizontal scrollbar from a dropdown that
   briefly mis-positions before Popper settles. The page never legitimately
   scrolls horizontally. */
.docs-body {
  overflow-x: clip;
}

/* ---------- Layout shell ---------- */
.docs-shell {
  max-width: 1400px;
  margin: 0 auto;
}

/* ---------- Left sidebar (section nav) ---------- */
.docs-sidebar {
  border-right: 1px solid var(--phoenix-border-color);
  background: var(--phoenix-body-bg);
}

.docs-sidebar-inner {
  position: sticky;
  top: 4rem;
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
  padding: 1.5rem 1rem;
}

.docs-nav-section {
  margin-bottom: 1.25rem;
}

.docs-nav-section-title {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--phoenix-body-emphasis-color);
  text-decoration: none;
  margin-bottom: 0.5rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
}
.docs-nav-section-title:hover {
  background: var(--phoenix-tertiary-bg);
  color: var(--phoenix-body-emphasis-color);
}

.docs-nav-page-link {
  display: block;
  padding: 0.3rem 0.6rem;
  font-size: 0.875rem;
  color: var(--phoenix-body-tertiary-color);
  text-decoration: none;
  border-radius: 0.25rem;
  border-left: 2px solid transparent;
}
.docs-nav-page-link:hover {
  color: var(--phoenix-body-emphasis-color);
  background: var(--phoenix-tertiary-bg);
}
.docs-nav-page-link.active {
  color: var(--phoenix-primary-text-emphasis);
  background: var(--phoenix-primary-bg-subtle);
  border-left-color: var(--phoenix-primary);
  font-weight: 600;
  scroll-margin-top: 0.5rem;
  scroll-margin-bottom: 0.5rem;
}

/* Admin docs sidebar — sticky parity with user docs. Mirror the
   user-docs split: outer `<aside>` owns the column, inner `<div>` is
   the actual sticky scroll container. Keeping the sticky behaviour on
   the inner element (not the aside) is required so the JS scroll-into-
   view hook (`docs.js:revealActiveSidebarLink`) can reliably target a
   real scroll container. */
.admin-docs-sidebar {
  background: var(--phoenix-body-bg);
  transition: opacity 180ms ease;
}
.admin-docs-sidebar-inner {
  position: sticky;
  top: 1rem;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  padding: 0.5rem 0.25rem;
}
.admin-docs-nav-page-link.active {
  scroll-margin-top: 0.5rem;
  scroll-margin-bottom: 0.5rem;
}

/* ---------- Admin docs sticky mobile bar ----------
   Holds the hamburger (sections drawer trigger) and the breadcrumb on
   admin docs. Sticks under the Phoenix top navbar so small-screen
   readers can pop the drawer without scrolling back to the top. The
   `top` value matches the Phoenix navbar height (set on `:root` by
   the theme, with a sensible fallback). */
.admin-docs-mobile-bar {
  position: sticky;
  top: calc(var(--phoenix-navbar-top-height, 4rem));
  z-index: 1019; /* below Phoenix navbar (1020), above content */
  background: var(--phoenix-body-bg);
  padding: 0.5rem 0;
  margin-left: -0.25rem;
  margin-right: -0.25rem;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  border-bottom: 1px solid var(--phoenix-border-color);
}
/* When the breadcrumb is long, let it truncate rather than wrap and
   blow the bar's height. */
.admin-docs-mobile-bar nav {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Collapsible sidebar (lg+) ----------
   When `.docs-shell` or `.admin-docs-shell` carries the
   `.sidebar-collapsed` class, the sidebar hides and the article column
   flexes into the freed columns. The toggle button stays visible at
   all times so the reader can put the sidebar back.

   Layout math (Bootstrap 12-col grid):
   - User docs lg : sidebar=3, article=9         -> collapsed: article=12
   - User docs xl : sidebar=2, article=8, rail=2 -> collapsed: article=10, rail=2
   - Admin docs lg: sidebar=3, article=9         -> collapsed: article=12
   - Admin docs xl: sidebar=3, article=7, rail=2 -> collapsed: article=10, rail=2

   Below lg, the class is inert. Small screens use the offcanvas drawer
   for navigation, and the sidebar `<aside>` itself is hidden by `d-none`. */
@media (min-width: 992px) {
  .docs-shell.sidebar-collapsed .docs-sidebar,
  .admin-docs-shell.sidebar-collapsed .admin-docs-sidebar {
    display: none !important;
  }
  .docs-shell.sidebar-collapsed .docs-article,
  .admin-docs-shell.sidebar-collapsed .admin-docs-article {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
@media (min-width: 1200px) {
  /* At xl the right rail (col-xl-2) is visible. Article gets the
     freed sidebar columns but the rail keeps its 2 cols. */
  .docs-shell.sidebar-collapsed .docs-article,
  .admin-docs-shell.sidebar-collapsed .admin-docs-article {
    flex: 0 0 83.33333%;
    max-width: 83.33333%;
  }
}

/* Toggle button visual state. The icon and label are swapped in JS;
   CSS only handles theming and the focus / hover affordances. */
.docs-sidebar-toggle,
.admin-docs-sidebar-toggle {
  color: var(--phoenix-body-tertiary-color);
}
.docs-sidebar-toggle {
  border: 0;
  background: transparent;
}
.docs-sidebar-toggle:hover,
.admin-docs-sidebar-toggle:hover,
.docs-sidebar-toggle:focus-visible,
.admin-docs-sidebar-toggle:focus-visible {
  color: var(--phoenix-body-emphasis-color);
}
.docs-sidebar-toggle:hover {
  background: var(--phoenix-tertiary-bg);
}

/* Offcanvas drawers (user + admin) — keep the link styling consistent
   with the desktop sidebar when the nav partial renders inside the drawer. */
.docs-mobile-nav-body .docs-nav-section-title,
.admin-docs-mobile-nav .admin-docs-nav-section-title {
  display: block;
  padding: 0.25rem 0.5rem;
}
.docs-mobile-nav-body .docs-nav-page-link,
.admin-docs-mobile-nav .admin-docs-nav-page-link {
  display: block;
  padding: 0.45rem 0.6rem;
}

/* ---------- Content column ---------- */
.docs-content {
  padding: 2rem 2.5rem 4rem;
  min-width: 0;  /* allows pre to shrink under flex */
}

@media (max-width: 991px) {
  .docs-content { padding: 1.5rem 1rem 3rem; }
}

.docs-breadcrumb a {
  color: var(--phoenix-body-tertiary-color);
  text-decoration: none;
}
.docs-breadcrumb a:hover { color: var(--phoenix-primary); }

.docs-page-header {
  border-bottom: 1px solid var(--phoenix-border-color);
  padding-bottom: 1rem;
  margin-bottom: 1.75rem;
}
.docs-page-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.docs-page-description {
  color: var(--phoenix-body-secondary-color);
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
}

/* ---------- Markdown body ---------- */
.docs-page-body {
  max-width: var(--docs-content-max);
  font-size: 1rem;
  line-height: 1.7;
}

.docs-page-body h2 {
  margin-top: 2.25rem;
  margin-bottom: 0.75rem;
  font-size: 1.5rem;
  font-weight: 700;
  border-bottom: 1px solid var(--phoenix-border-color);
  padding-bottom: 0.4rem;
  scroll-margin-top: 5rem;
}
.docs-page-body h3 {
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
  font-weight: 700;
  scroll-margin-top: 5rem;
}
.docs-page-body h4 {
  margin-top: 1.25rem;
  font-size: 1.05rem;
  font-weight: 600;
  scroll-margin-top: 5rem;
}
.docs-page-body p { margin-bottom: 1rem; }
.docs-page-body ul, .docs-page-body ol { margin-bottom: 1rem; padding-left: 1.5rem; }
.docs-page-body li { margin-bottom: 0.25rem; }

.docs-page-body a {
  color: var(--phoenix-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.docs-page-body a:hover { color: var(--phoenix-primary-text-emphasis); }

.docs-page-body code {
  background: var(--phoenix-tertiary-bg);
  padding: 0.1rem 0.4rem;
  border-radius: 0.25rem;
  font-size: 0.875em;
  color: var(--phoenix-body-emphasis-color);
}

.docs-page-body pre {
  background: var(--phoenix-tertiary-bg);
  border: 1px solid var(--phoenix-border-color);
  padding: 1rem 1.25rem;
  border-radius: 0.5rem;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.85rem;
  line-height: 1.55;
  overflow-x: auto;
  position: relative;
  margin-bottom: 1.25rem;
}
.docs-page-body pre code {
  background: transparent;
  padding: 0;
  font-size: inherit;
  color: inherit;
}

.docs-copy-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  font-size: 0.75rem;
  padding: 0.15rem 0.55rem;
  background: var(--phoenix-body-bg);
  border: 1px solid var(--phoenix-border-color);
  color: var(--phoenix-body-tertiary-color);
  border-radius: 0.25rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity 150ms ease;
}
.docs-page-body pre:hover .docs-copy-btn,
.docs-copy-btn:focus-visible { opacity: 1; }
.docs-copy-btn.copied { color: var(--phoenix-success); }

.docs-page-body table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.25rem;
  font-size: 0.95rem;
}
.docs-page-body th, .docs-page-body td {
  padding: 0.6rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--phoenix-border-color);
  vertical-align: top;
}
.docs-page-body th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--phoenix-body-tertiary-color);
  background: var(--phoenix-tertiary-bg);
}

.docs-page-body blockquote {
  border-left: 3px solid var(--phoenix-primary);
  padding: 0.75rem 1rem;
  margin: 1rem 0;
  background: var(--phoenix-primary-bg-subtle);
  color: var(--phoenix-body-emphasis-color);
  border-radius: 0 0.25rem 0.25rem 0;
}

.docs-page-body .admonition {
  background: var(--phoenix-info-bg-subtle);
  border-left: 3px solid var(--phoenix-info);
  padding: 0.75rem 1rem;
  margin: 1rem 0;
  border-radius: 0 0.25rem 0.25rem 0;
}
.docs-page-body .admonition.warning {
  background: var(--phoenix-warning-bg-subtle);
  border-left-color: var(--phoenix-warning);
}
.docs-page-body .admonition.tip {
  background: var(--phoenix-success-bg-subtle);
  border-left-color: var(--phoenix-success);
}
.docs-page-body .admonition-title {
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.docs-page-body .doc-anchor {
  color: var(--phoenix-body-tertiary-color);
  text-decoration: none;
  margin-left: 0.4rem;
  opacity: 0;
  font-weight: 400;
  font-size: 0.85em;
}
.docs-page-body h2:hover .doc-anchor,
.docs-page-body h3:hover .doc-anchor,
.docs-page-body h4:hover .doc-anchor { opacity: 1; }

/* Codehilite (Pygments) — neutral palette tied to Phoenix variables. */
.codehilite .k, .codehilite .kn, .codehilite .kc { color: var(--phoenix-primary); }
.codehilite .s, .codehilite .s1, .codehilite .s2 { color: var(--phoenix-success); }
.codehilite .c, .codehilite .c1, .codehilite .cm { color: var(--phoenix-body-tertiary-color); font-style: italic; }
.codehilite .nf { color: var(--phoenix-warning); }
.codehilite .nb { color: var(--phoenix-info); }

/* ---------- Right rail (in-page TOC) ---------- */
.docs-onthispage {
  border-left: 1px solid var(--phoenix-border-color);
}
.docs-onthispage-inner {
  position: sticky;
  top: 4rem;
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
  padding: 1.5rem 1rem;
}
.docs-onthispage-title {
  color: var(--phoenix-body-tertiary-color);
  margin-bottom: 0.75rem;
}
.docs-onthispage .toc ul { padding-left: 0.75rem; list-style: none; }
.docs-onthispage .toc > ul { padding-left: 0; }
.docs-onthispage .toc li { margin: 0.2rem 0; }
.docs-onthispage .toc a {
  color: var(--phoenix-body-tertiary-color);
  text-decoration: none;
  font-size: 0.85rem;
  display: block;
  padding: 0.15rem 0.5rem;
  border-left: 2px solid transparent;
}
.docs-onthispage .toc a:hover { color: var(--phoenix-body-emphasis-color); }
.docs-onthispage .toc a.active {
  color: var(--phoenix-primary);
  border-left-color: var(--phoenix-primary);
  background: var(--phoenix-primary-bg-subtle);
}

/* ---------- Pager ---------- */
.docs-pager {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid var(--phoenix-border-color);
  padding-top: 1.25rem;
}
.docs-pager a {
  display: inline-block;
  padding: 0.75rem 1.25rem;
  border: 1px solid var(--phoenix-border-color);
  border-radius: 0.5rem;
  text-decoration: none;
  color: var(--phoenix-body-color);
  background: var(--phoenix-body-bg);
  max-width: 48%;
}
.docs-pager a:hover {
  border-color: var(--phoenix-primary);
  color: var(--phoenix-primary);
}
.docs-pager-next { text-align: right; }
.docs-pager-direction {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--phoenix-body-tertiary-color);
  margin-bottom: 0.15rem;
}
.docs-pager-title { font-weight: 600; }

/* ---------- Index page ---------- */
.docs-index-hero {
  padding: 3rem 1rem;
}
.docs-index-title {
  font-size: 2.5rem;
  font-weight: 800;
}
.docs-index-subtitle {
  color: var(--phoenix-body-secondary-color);
  font-size: 1.1rem;
  max-width: 36rem;
  margin: 0 auto;
}
.docs-index-search {
  max-width: 32rem;
  position: relative;
}

.docs-section-card {
  border: 1px solid var(--phoenix-border-color);
  border-radius: 0.75rem;
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
  color: var(--phoenix-body-color);
  background: var(--phoenix-body-bg);
}
.docs-section-card:hover {
  border-color: var(--phoenix-primary);
  color: var(--phoenix-body-emphasis-color);
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}
@media (prefers-reduced-motion: no-preference) {
  .docs-section-card:hover { transform: translateY(-2px); }
}
.docs-section-card-title {
  color: var(--phoenix-body-emphasis-color);
  margin-bottom: 0.5rem;
}
.docs-section-card-desc {
  color: var(--phoenix-body-secondary-color);
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
}
.docs-section-card-pages {
  font-size: 0.85rem;
  color: var(--phoenix-body-tertiary-color);
}
.docs-section-card-pages li { padding: 0.15rem 0; }
.docs-section-card-pages .dot {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--phoenix-primary);
  margin-right: 0.4rem;
  vertical-align: middle;
}

/* ---------- Search results dropdown ---------- */
.docs-search-results {
  position: absolute;
  width: 100%;
  background: var(--phoenix-body-bg);
  border: 1px solid var(--phoenix-border-color);
  border-radius: 0.5rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  z-index: 1040;
  max-height: 24rem;
  overflow-y: auto;
}
.docs-search-results li {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--phoenix-border-color);
}
.docs-search-results li:last-child { border-bottom: 0; }
.docs-search-results a {
  display: block;
  text-decoration: none;
  color: var(--phoenix-body-color);
}
.docs-search-results a:hover,
.docs-search-results a:focus {
  color: var(--phoenix-primary);
  background: var(--phoenix-tertiary-bg);
}
.docs-search-results .meta {
  font-size: 0.7rem;
  color: var(--phoenix-body-tertiary-color);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ---------- Doc help link (used from product templates) ---------- */
.doc-help-link {
  font-size: 0.85rem;
  text-decoration: none;
  color: var(--phoenix-primary);
}
.doc-help-link:hover {
  color: var(--phoenix-primary-text-emphasis);
  text-decoration: underline;
}

/* ---------- "Go to the live page" callout under page title ----------
   Top-of-page chip that links from a docs page to the feature it
   describes. Inherits theme-aware colors from `.alert-subtle-primary`.
   The inner secondary text is dimmed; the label is emphasized. */
.docs-live-link {
  color: var(--phoenix-primary-text-emphasis);
  transition: background 150ms ease, transform 150ms ease;
}
.docs-live-link:hover,
.docs-live-link:focus-visible {
  color: var(--phoenix-primary-text-emphasis);
  background: var(--phoenix-primary-bg-subtle);
}
@media (prefers-reduced-motion: no-preference) {
  .docs-live-link:hover { transform: translateY(-1px); }
}

/* ---------- PyGAD brand reference card ----------
   Clickable card that points readers at PyGAD's own documentation.
   The logo art uses transparency for its white detailing (fangs,
   eye-whites, scale lines), so the plate is a DELIBERATE fixed white
   surface rather than a theme-driven one: on the dark theme those white
   parts would fall back to the dark page and the snake would read as a
   muddy blob. A white brand chip stays legible on both themes, so the
   plate background and the on-plate text colors are intentionally fixed
   (this is the rare, documented exception to the theme-aware-colors
   rule). The figcaption sits on the page, so it keeps theme-aware text. */
.pygad-brand {
  margin-inline: 0;
  text-align: center;
}
.pygad-brand-card {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  max-width: 100%;
  padding: 1.25rem 1.75rem;
  background: #fff;
  border: 1px solid var(--phoenix-border-color);
  border-radius: 0.75rem;
  box-shadow: var(--phoenix-box-shadow-sm);
  text-decoration: none;
}
.pygad-brand-logo {
  display: block;
  width: 180px;
  max-width: 100%;
  height: auto;
}
.pygad-brand-cta {
  font-weight: 600;
  color: #0860b8;
}
.pygad-brand-card:hover .pygad-brand-cta,
.pygad-brand-card:focus-visible .pygad-brand-cta {
  text-decoration: underline;
}
.pygad-brand-card:hover,
.pygad-brand-card:focus-visible {
  border-color: #0860b8;
}
.pygad-brand-caption {
  margin-top: 0.5rem;
}
@media (prefers-reduced-motion: no-preference) {
  .pygad-brand-card {
    transition: transform 150ms ease, border-color 150ms ease,
      box-shadow 150ms ease;
  }
  .pygad-brand-card:hover { transform: translateY(-2px); box-shadow: var(--phoenix-box-shadow); }
}

/* ---------- Mermaid architecture diagrams ----------
   The .mermaid div is the wrapper the Markdown preprocessor emits around
   every ```mermaid block. mermaid.js replaces its text content with an
   inline <svg>. Style targets both the wrapper and the rendered SVG so
   diagrams sit in a Phoenix-themed frame at any viewport width. */
.mermaid {
  display: block;
  margin: 1.5rem auto;
  padding: 1rem;
  background: var(--phoenix-emphasis-bg);
  border: 1px solid var(--phoenix-border-color);
  border-radius: 0.5rem;
  overflow-x: auto;
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.4;
  /* While loading, raw Mermaid source is visible. Hide ugly raw text by
     making it the same color as the background until SVG arrives. */
  color: transparent;
}
.mermaid[data-processed="true"] {
  color: var(--phoenix-body-color);
}
.mermaid svg {
  max-width: 100%;
  height: auto;
  display: inline-block;
}
.diagram-caption {
  display: block;
  margin: -0.75rem auto 1.5rem;
  max-width: 60ch;
  font-size: 0.85rem;
  color: var(--phoenix-body-tertiary-color);
  text-align: center;
  font-style: italic;
}
@media (prefers-reduced-motion: reduce) {
  .mermaid svg * {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- Mermaid figure (toolbar + fullscreen) ---------- */
.mermaid-figure {
  position: relative;
  margin: 1.5rem auto;
}
.mermaid-figure .mermaid {
  margin: 0;
}
.mermaid-figure .mermaid svg {
  transform-origin: center center;
  transition: transform 120ms ease;
  cursor: grab;
}
.mermaid-figure.is-panning .mermaid svg {
  cursor: grabbing;
  transition: none;
}
.mermaid-figure-toolbar {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: flex;
  gap: 0.25rem;
  background: var(--phoenix-body-bg);
  border: 1px solid var(--phoenix-border-color);
  border-radius: 0.4rem;
  padding: 0.15rem;
  opacity: 0;
  transition: opacity 150ms ease;
  z-index: 2;
}
.mermaid-figure:hover .mermaid-figure-toolbar,
.mermaid-figure:focus-within .mermaid-figure-toolbar {
  opacity: 1;
}
.mermaid-figure-btn {
  background: transparent;
  border: 0;
  border-radius: 0.3rem;
  width: 1.85rem;
  height: 1.85rem;
  font-size: 0.95rem;
  line-height: 1;
  color: var(--phoenix-body-tertiary-color);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mermaid-figure-btn:hover,
.mermaid-figure-btn:focus-visible {
  background: var(--phoenix-tertiary-bg);
  color: var(--phoenix-body-emphasis-color);
}

.mermaid-overlay {
  position: fixed;
  inset: 0;
  background: var(--phoenix-body-bg);
  z-index: 1080;
  display: flex;
  flex-direction: column;
  padding: 1rem;
}
.mermaid-overlay[hidden] { display: none; }
.mermaid-overlay-toolbar {
  display: flex;
  gap: 0.35rem;
  justify-content: flex-end;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--phoenix-border-color);
}
.mermaid-overlay-toolbar .mermaid-figure-btn {
  background: var(--phoenix-tertiary-bg);
  border: 1px solid var(--phoenix-border-color);
}
.mermaid-overlay-stage {
  flex: 1;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  cursor: grab;
}
.mermaid-overlay-stage.is-panning { cursor: grabbing; }
.mermaid-overlay-stage > svg {
  max-width: none;
  max-height: none;
  width: auto;
  height: auto;
  transform-origin: center center;
  transition: transform 120ms ease;
}
.mermaid-overlay-stage.is-panning > svg { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .mermaid-figure .mermaid svg,
  .mermaid-overlay-stage > svg,
  .mermaid-figure-toolbar {
    transition: none !important;
  }
}