/*
 * 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;
}

/* A label takes the page's text colour — dark on a light page, light on a dark one — whatever Mermaid set. Not a
   note's: it stands on a fill of Mermaid's own choosing, which its theme keeps pale on a dark page (a state
   note under `redux-dark-color`, Mermaid 12's dark default), and the colour Mermaid sets for its text is the
   one that reads on it. Until Prisment repaints the box: an outlined fill puts the canvas under it, a Spectrum
   tint a hue, and then the page's colour is the one that reads again (CH-REQ-20261006-B). */
.doc-mermaid svg *:not(.noteLabel, .noteLabel *),
.doc-mermaid svg:is([data-fill='outline'], [data-spectrum]) :is(.noteLabel, .noteLabel *) {
  color: unset !important;
}

/* A label's paragraph is as tall as Mermaid measured it: its label's line-height, and no margin. The
   document's own paragraph height reached into labels and cut a second line's descenders — "Proxy"
   read "Proxv" (CH-REQ-20260929-A §11). */
.doc-mermaid svg foreignObject p {
  margin: 0 !important;
  line-height: inherit !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;
}

/* A drawing with a pinned row (pin.js) moves without the ease: the GPU runs an ease on its own clock and the row is placed
   from the page's, so the row trailed every move and shimmered. Without it the move and the row land in the same frame. */
[data-mermaid-pinning] .doc-mermaid {
  transition: none !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;
  /* The frame owns its layers: the toolbar's z-index (20) and its tooltip's (100) order the frame's own content, and
     never reach the page's — as they did, drawing a diagram's buttons over the review dock's draft box and anything
     else app chrome holds above the page. The frame as a whole stays at the page's base level (its Customize panel
     raises it, below). */
  isolation: isolate !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;
}

/* A row of its own above the canvas, not an overlay on it: as one, its buttons stood over the top of
   any drawing tall enough to fill the canvas — a sequence diagram's top-right participant — and,
   wrapped to two rows on a phone, over more (CH-REQ-20261002-K §9.2). The buttons stand 6px down and 8px
   in — close to the frame's corner, where the row costs the least — and the drawing starts right under
   them. Still pass-through but for its buttons. */
.doc-mermaid-toolbar {
  position: relative !important;
  flex: none !important;
  z-index: 20 !important;
  align-items: center !important;
  background: transparent !important;
  border: none !important;
  display: flex !important;
  gap: 6px !important;
  justify-content: flex-end !important;
  padding: 0 !important;
  user-select: none !important;
  overflow: visible !important;
  pointer-events: none !important;
}

/* Its place in the frame. Named with the figure and `:first-child`, to outrank the document's
   `.markdown-body div:first-child` reset (0,2,1), which took its top margin and drew the buttons
   against the frame's edge — as it once did the Customize panel's head. */
.doc-mermaid-viewer > .doc-mermaid-toolbar:first-child {
  margin: 6px 8px 0 !important;
}

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

.doc-mermaid-actions button {
  border-radius: 8px !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;
}

/* Native reader controls keep Mermaid's plate palette. The workspace's shared authoring pencil
   owns its accent tone through IconButton; the row above still owns its geometry. */
.doc-mermaid-actions button:not(.ui-icon-button) {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
}

/* The view button carries its name, not only an icon: Classic / Hand-drawn / Neo (CH-REQ-20260928-F). */
.doc-mermaid-actions button[data-mermaid-action="look"] {
  width: auto !important;
  gap: 5px !important;
  padding: 0 9px !important;
  font-family: var(--font-body) !important;
  font-size: var(--doc-type-footnote) !important;
  font-weight: var(--doc-weight-semibold) !important;
  white-space: nowrap !important;
}

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

/* One tooltip for the whole viewer: the card the panel's Direction row draws (doc-mermaid-customize.css) — the
   document's border, card, text, radius, shadow and footnote type, so it follows the document's scheme with no
   override of its own. The fallbacks are for /help and the blog, which link this file without doc-scheme.css. */
.doc-mermaid-actions button[data-tooltip]::before {
  content: attr(data-tooltip) !important;
  position: absolute !important;
  top: calc(100% + 0.25rem) !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(-3px) !important;
  z-index: 100 !important;
  padding: 0.25rem 0.5rem !important;
  border: 1px solid var(--border-color, #cbd5e1) !important;
  border-radius: var(--doc-radius-sm, 6px) !important;
  background: var(--card-bg, #ffffff) !important;
  box-shadow: var(--doc-shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.08)) !important;
  color: var(--text-color, #0f172a) !important;
  font-family: var(--font-body) !important;
  font-size: var(--doc-type-footnote, 0.6875rem) !important;
  font-weight: 500 !important;
  line-height: 1.35 !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;
}

/* The last button sits at the frame's edge — on the screen's, in fullscreen: its note hangs to the left of it. */
.doc-mermaid-actions button[data-tooltip]:last-child::before {
  left: auto !important;
  right: 0 !important;
  transform: translateY(-3px) !important;
}

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

.doc-mermaid-actions button[data-tooltip]:last-child:hover::before {
  transform: translateY(0) !important;
}

.doc-mermaid-canvas {
  position: relative !important;
  z-index: 1 !important;
  /* The figure clips, not the canvas: a zoomed or moved drawing shows through the toolbar's row up to the figure's top edge,
     rather than being cut flat 36px below it, under an empty strip (CH-REQ-20261006-B A10). The row is pass-through but for
     its buttons, which stand above (z-index 20), and a drag that starts on the drawing there pans it. */
  overflow: visible !important;
  cursor: grab !important;
  /* A click and a move pans the drawing; it must not also sweep a selection over its labels — it did, label after
     label, wherever the hand went (CH-REQ-20261006-B A7). The error card sets its own `user-select: text`, so a
     syntax error stays copyable, and Copy takes the source. */
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-touch-callout: none !important;
  /* The room above a drawing is the row's own and nothing more: no padding of the canvas's, so the drawing
     starts under the buttons and its own margin is its air. A short diagram's frame is 196px — the row's
     36px and this 160 — where it was 240 with the room above it twice the room below (§9.2). */
  min-height: 160px !important;
  max-height: 520px !important;
  padding: 0 1rem 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-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;
}

/* A screen has no row to spare: in fullscreen the buttons float over the top-right corner — pass-through but for the buttons,
   as ever — and the canvas is the whole screen, so the drawing can use its top (CH-REQ-20261006-B A8). A page's figure keeps
   its row (§9.2). */
.doc-mermaid-viewer:fullscreen > .doc-mermaid-toolbar:first-child {
  position: absolute !important;
  top: 6px !important;
  right: 8px !important;
  left: 8px !important;
  margin: 0 !important;
}

.doc-mermaid-viewer:fullscreen .doc-mermaid-canvas {
  max-height: none !important;
  /* The whole screen: the buttons float over its corner, so there is no row above it (A8) — the canvas the fit measures. */
  height: auto !important;
  min-height: 0 !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 - 40px) !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-canvas {
  background: #0d1117 !important;
}

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

:root[data-doc-scheme="dark"] .doc-mermaid-actions button:not(.ui-icon-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: diagram actions have no diagram to act on. Copy and the workspace's
   authoring pencil remain available so someone can recover the source and fix it. */
[data-doc-mermaid-viewer][data-mermaid-error] .doc-mermaid-actions button[data-mermaid-action]:not([data-mermaid-action='copy']) {
  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;
}