/*
 * doc-mermaid.css — Interactive Mermaid Diagram Viewer, Pan/Zoom & Fullscreen Toolbar,
 * and the syntax-error card shown when a diagram's source does not parse.
 * Part of the doc-framework modular CSS suite (500-line hard limit, 400-line target).
 */

.mermaid-pan-zoom-container {
  width: 100% !important;
  max-width: 100% !important;
  max-height: 520px !important;
  margin: 1.25rem 0 !important;
  transition: all 0.3s ease;
  user-select: none;
  position: relative;
  overflow: hidden;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
}

.mermaid-pan-zoom-container:active {
  cursor: grabbing;
}

.mermaid-zoom-wrapper {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.mermaid-zoom-wrapper pre.mermaid {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.mermaid svg,
.doc-mermaid svg {
  max-width: 100%;
  max-height: 450px !important;
  width: auto;
  height: auto;
  margin: 0 auto !important;
  display: block !important;
  object-fit: contain !important;
}

.doc-mermaid svg * {
  color: unset !important;
}

.doc-mermaid {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 auto !important;
  transform-origin: center center !important;
  transition: transform 60ms linear !important;
}

/* Surface colours come from the active theme, with the original light values as fallbacks. These
   were hardcoded white, which put a white plate under every diagram on a dark theme — the diagram
   itself was themed, the frame around it was not. */
.doc-mermaid-viewer {
  position: relative !important;
  background: #ffffff !important;
  /* Stock edge, like the plate it draws (see the scheme note below); the border controls move it. */
  border: 1px solid #e2e8f0 !important;
  /* The frame is a boxed element on the page, so it takes the container corner and shadow like a
     table or a code block does. Both were literals — `12px` and a fixed `0 16px 40px` — which is why
     a document squared off and flattened in the customizer kept one rounded, floating panel in it
     (CH-REQ-20260818-G). The fallbacks are those literals, for `/help` and the blog: they link this
     file on its own, with no `doc-scheme.css` to declare either token. */
  border-radius: var(--surface-radius, 12px) !important;
  box-shadow: var(--doc-diagram-shadow, 0 16px 40px rgba(24, 38, 63, 0.08)) !important;
  display: flex !important;
  flex-direction: column !important;
  margin: 1.5rem 0 !important;
  overflow: hidden !important;
}

.doc-mermaid-toolbar {
  position: relative !important;
  z-index: 20 !important;
  align-items: center !important;
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
  display: flex !important;
  gap: 12px !important;
  justify-content: space-between !important;
  padding: 10px 14px !important;
  user-select: none !important;
  flex-shrink: 0 !important;
  overflow: visible !important;
}

.doc-mermaid-toolbar span {
  color: #0f172a !important;
  font-family: var(--font-body) !important;
  font-size: 0.88rem !important;
  font-weight: var(--doc-weight-bold) !important;
}

.doc-mermaid-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  justify-content: flex-end !important;
  overflow: visible !important;
}

.doc-mermaid-actions button {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  color: #334155 !important;
  cursor: pointer !important;
  height: 30px !important;
  width: 30px !important;
  padding: 0 !important;
  transition: all 0.15s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  position: relative !important;
}

.doc-mermaid-actions button:hover {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}

.doc-mermaid-actions button[data-tooltip]::before {
  content: attr(data-tooltip) !important;
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(-3px) scale(0.95) !important;
  background: #0f172a !important;
  color: #ffffff !important;
  font-family: var(--font-body) !important;
  font-size: 10px !important;
  font-weight: var(--doc-weight-semibold) !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25) !important;
  z-index: 100 !important;
  line-height: 1 !important;
}

.doc-mermaid-actions button[data-tooltip]::after {
  content: '' !important;
  position: absolute !important;
  top: calc(100% + 2px) !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(-3px) !important;
  border-width: 0 5px 6px 5px !important;
  border-style: solid !important;
  border-color: transparent transparent #0f172a transparent !important;
  pointer-events: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease !important;
  z-index: 100 !important;
}

.doc-mermaid-actions button[data-tooltip]:hover::before,
.doc-mermaid-actions button[data-tooltip]:hover::after {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(-50%) translateY(0) scale(1) !important;
}

.doc-mermaid-canvas {
  position: relative !important;
  z-index: 1 !important;
  overflow: hidden !important;
  cursor: grab !important;
  min-height: 240px !important;
  max-height: 520px !important;
  padding: 1.25rem 1rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #ffffff !important;
  touch-action: none !important;
  flex: 1 1 auto !important;
}

.doc-mermaid-canvas:active {
  cursor: grabbing !important;
}

.doc-mermaid-footer {
  position: relative !important;
  z-index: 20 !important;
  background: #f8fafc !important;
  border-top: 1px solid #f1f5f9 !important;
  padding: 6px 14px !important;
  font-family: var(--font-body) !important;
  font-size: 0.78rem !important;
  font-weight: var(--doc-weight-semibold) !important;
  color: #64748b !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  user-select: none !important;
  flex-shrink: 0 !important;
}

.doc-mermaid-viewer:fullscreen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  z-index: 99999 !important;
  background: #ffffff !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

.doc-mermaid-viewer:fullscreen .doc-mermaid-canvas {
  max-height: none !important;
  height: calc(100vh - 80px) !important;
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.doc-mermaid-viewer:fullscreen .doc-mermaid svg {
  max-height: calc(100vh - 100px) !important;
  max-width: 96vw !important;
  height: auto !important;
  width: auto !important;
  object-fit: contain !important;
}

/* ── Dark scheme ────────────────────────────────────────────────────────────────────────────
 *
 * The one place in the framework that deliberately does NOT follow the palette.
 *
 * A Mermaid diagram is rendered by Mermaid, using its own stock `default` / `dark` theme — see
 * `markdown-engine/elements/mermaid/themes.ts`, which refuses per-theme overrides so a diagram
 * looks the same in the preview and in the exported file. The frame around it has to match the
 * thing inside it. Tying the frame to `--card-bg` and `--primary` made it drift: a custom style
 * with a pink accent drew a pink-bordered panel around a stock blue-and-grey diagram.
 *
 * So this keys on `data-doc-scheme` only — native light, native dark, nothing in between. That
 * still removes the old four-way `[data-theme=dark|dark-spec|…]`
 * duplication, which was the actual problem: two scheme blocks instead of a block per preset.
 * `check-theme-contracts.mjs` rule 7 exempts this file for exactly this reason. */
:root[data-doc-scheme="dark"] .mermaid-pan-zoom-container,
:root[data-doc-scheme="dark"] .doc-mermaid-viewer {
  /* `!important` throughout this file, and the base rule above carries it too, so the scheme
     override has to as well — specificity alone loses to an `!important` declaration. */
  background: #0d1117 !important;
  border-color: #1e293b !important;
}

:root[data-doc-scheme="dark"] .doc-mermaid-toolbar {
  background: #161b22 !important;
  border-bottom-color: #1e293b !important;
}

:root[data-doc-scheme="dark"] .doc-mermaid-canvas {
  background: #0d1117 !important;
}

:root[data-doc-scheme="dark"] .doc-mermaid-footer {
  background: #161b22 !important;
  border-top-color: #1e293b !important;
  color: #94a3b8 !important;
}

:root[data-doc-scheme="dark"] .doc-mermaid-toolbar span {
  color: #f8fafc !important;
}

:root[data-doc-scheme="dark"] .doc-mermaid-actions button {
  background: #21262d !important;
  border-color: #30363d !important;
  color: #f1f5f9 !important;
}

:root[data-doc-scheme="dark"] .doc-mermaid-actions button:hover {
  background: #30363d !important;
  border-color: #8b949e !important;
  color: #38bdf8 !important;
}

:root[data-doc-scheme="dark"] .doc-mermaid-viewer:fullscreen,
:root[data-doc-scheme="dark"] .doc-mermaid-viewer:fullscreen .doc-mermaid-canvas {
  background: #0d1117 !important;
}

/* ── Container chrome ───────────────────────────────────────────────────────────────────────
 * The frame answering the customizer's border controls, alongside the corner and shadow it takes on
 * the base rule above. One line per choice, because these only make sense read as a set — the same
 * reason the status hues are laid out that way in `doc-scheme.css`.
 *
 * Restated here rather than joining the selector lists in `doc-prose.css`: every rule in this file
 * is `!important`, and a non-important variant rule in an earlier file loses to the base rule
 * however specific it is. And placed **after the dark-scheme block**, whose `border-color` matches
 * these on specificity and `!important` alike — above it, the reader's choice was overwritten by the
 * stock edge on every dark page, i.e. on the styles most likely to use it.
 *
 * Width first, then colour, so the two read as independent controls. Both are opt-in, which keeps
 * the default safe: with neither set the frame keeps the stock edge that matches the diagram Mermaid
 * drew inside it (see the scheme note above). A reader who asks for an accent edge on every boxed
 * element gets one here too — a choice, not a default.
 */
:root[data-surface-border="none"] .doc-mermaid-viewer     { border-width: 0 !important; }
:root[data-surface-border="hairline"] .doc-mermaid-viewer { border: 1px solid var(--border-subtle) !important; }
:root[data-surface-border="solid"] .doc-mermaid-viewer    { border: 1px solid var(--border-color) !important; }
:root[data-surface-border="strong"] .doc-mermaid-viewer   { border: 2px solid var(--border-color) !important; }

:root[data-surface-border-color="border"] .doc-mermaid-viewer { border-color: var(--border-color) !important; }
:root[data-surface-border-color="subtle"] .doc-mermaid-viewer { border-color: var(--border-subtle) !important; }
:root[data-surface-border-color="accent"] .doc-mermaid-viewer { border-color: var(--primary) !important; }
:root[data-surface-border-color="muted"] .doc-mermaid-viewer  { border-color: var(--text-muted) !important; }

/* ── Syntax-error card ──────────────────────────────────────────────────────────────────────
 *
 * Shown in place of the diagram when Mermaid cannot parse the source. What it replaces was an
 * empty canvas framed by a toolbar labelled "Diagram" and a "100%" zoom readout, with the reason
 * left in a console nobody reading a document has open.
 *
 * Red rather than the palette's accent: this is a failure and has to read as one, against a frame
 * that is already stock-Mermaid rather than palette-driven (see the scheme note above). The four
 * surfaces are named once so the dark variant is a single block of overrides rather than a second
 * copy of every rule.
 *
 * Everything on the card is selectable text, so the error can be copied out of it the same way any
 * other text on the page can — the toolbar's Copy button hands back the diagram SOURCE, which is a
 * different thing to want.
 *
 * Keyed on `data-doc-scheme` alone, like everything else in this file, because the card has to
 * match the panel it sits inside. Keying it on the APP theme as well painted a dark red card into
 * a white viewer whenever the two disagreed — an app in dark mode showing a light presentation
 * style, which is an ordinary combination, not a corner case. The blog restyles this frame from
 * app tokens and restyles the card with it (`BlogMermaid.css`). */
.doc-mermaid-error {
  --mermaid-error-surface: #fef2f2;
  --mermaid-error-edge: #fecaca;
  --mermaid-error-ink: #b91c1c;
  --mermaid-error-ink-strong: #7f1d1d;

  width: 100% !important;
  max-width: 560px !important;
  margin: 0 auto !important;
  padding: 16px 18px !important;
  background: var(--mermaid-error-surface) !important;
  border: 1px solid var(--mermaid-error-edge) !important;
  border-left: 3px solid var(--mermaid-error-ink) !important;
  border-radius: 10px !important;
  font-family: var(--font-body) !important;
  text-align: left !important;
  cursor: auto !important;
  user-select: text !important;
  -webkit-user-select: text !important;
}

:root[data-doc-scheme='dark'] .doc-mermaid-error {
  --mermaid-error-surface: #24151a;
  --mermaid-error-edge: #7f1d1d;
  --mermaid-error-ink: #fca5a5;
  --mermaid-error-ink-strong: #fecaca;
}

.doc-mermaid-error-head {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: var(--mermaid-error-ink) !important;
}

/* `.doc-mermaid svg` above centres and stretches whatever SVG it finds inside a diagram, on the
   assumption that there is only ever one and Mermaid drew it. The card's warning icon is inside a
   diagram too, and without this it gets the diagram treatment: `margin: 0 auto` pushed it into the
   middle of the header, away from the words it belongs to. */
.doc-mermaid-error-head svg {
  flex: 0 0 auto !important;
  display: inline-block !important;
  width: 16px !important;
  height: 16px !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  object-fit: fill !important;
}

.doc-mermaid-error-title {
  font-size: 0.875rem !important;
  font-weight: var(--doc-weight-bold) !important;
}

.doc-mermaid-error-line {
  margin-left: auto !important;
  padding: 2px 9px !important;
  background: var(--mermaid-error-edge) !important;
  border-radius: 999px !important;
  font-size: 0.72rem !important;
  font-weight: var(--doc-weight-bold) !important;
  white-space: nowrap !important;
}

.doc-mermaid-error-summary {
  margin: 10px 0 0 !important;
  color: var(--mermaid-error-ink-strong) !important;
  font-size: 0.82rem !important;
  line-height: 1.5 !important;
}

/* Mermaid's excerpt of the offending source, with its caret under the exact column — the half of
   the parser's message worth reading. Monospace and unwrapped, or the caret stops lining up with
   the character it points at.
   Plain text, not a panel: it is two short lines, and the inner frame it used to sit in read as a
   code block to be scrolled rather than a message to be read and copied. The `!important` resets
   are load-bearing — this is a <pre> inside the document, so the prose and code stylesheets would
   otherwise give it their own background, border and padding. */
.doc-mermaid-error-excerpt {
  margin: 10px 0 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--mermaid-error-ink-strong) !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  font-size: 0.75rem !important;
  line-height: 1.5 !important;
  white-space: pre !important;
  overflow-x: auto !important;
  cursor: text !important;
}

.doc-mermaid-error-hint {
  margin: 10px 0 0 !important;
  color: var(--mermaid-error-ink) !important;
  font-size: 0.72rem !important;
  opacity: 0.85 !important;
}

/* Error-state chrome: every control that acts on a diagram has no diagram to act on. Copy stays,
   because the source is the one thing someone looking at a parse error wants back. */
[data-doc-mermaid-viewer][data-mermaid-error] .doc-mermaid-actions button:not([data-mermaid-action='copy']),
[data-doc-mermaid-viewer][data-mermaid-error] .doc-mermaid-footer {
  display: none !important;
}

[data-doc-mermaid-viewer][data-mermaid-error] .doc-mermaid-canvas,
[data-doc-mermaid-viewer][data-mermaid-error] .doc-mermaid-canvas:active {
  cursor: auto !important;
  align-items: flex-start !important;
  /* The canvas suppresses native gestures so a drag pans the diagram instead of scrolling the
     page. With no diagram to pan, that only stops a touch user selecting the error to copy it. */
  touch-action: auto !important;
}

[data-doc-mermaid-viewer][data-mermaid-error] .doc-mermaid {
  transform: none !important;
}