/*
 * doc-mermaid-customize.css — the Customize panel: a diagram's theme, view and motion
 * (CH-REQ-20260929-A §8).
 *
 * The runtime (src/modules/markdown-engine/elements/mermaid/customize.js) opens the panel into the
 * view-owned host the figure template puts under the toolbar. Everything visual is here, so the
 * workspace, an exported page and /help draw the same panel.
 *
 * Part of the diagram's frame, and styled like the rest of it: dark wherever the diagram is drawn dark
 * (`data-mermaid-scheme` or `data-doc-scheme`, as doc-mermaid-spectrum.css says),
 * with its own colours rather than the document's (doc-mermaid.css, `NATIVE_CHROME` in
 * scripts/verification/exemptions.mjs) — a frame follows what is inside it. Loaded by
 * doc-framework.css, and on its own by the precompiled pages beside doc-mermaid.css; like that file
 * it has no @import and every selector is mermaid-scoped.
 */

/* Open, the panel may reach past a short diagram rather than be cut off by the frame's corners. */
.doc-mermaid-viewer[data-mermaid-panel-open] {
  overflow: visible !important;
  z-index: 30 !important;
}

/* The canvas keeps the frame's corners itself, so an open panel shows no square ones. */
.doc-mermaid-viewer .doc-mermaid-canvas {
  border-radius: inherit !important;
}

/* Drawn hidden by the figure and shown by the runtime where the diagram has something to change —
   the toolbar's own `display` would otherwise override the `hidden` attribute. */
.doc-mermaid-actions button[hidden] {
  display: none !important;
}

/* The Customize button reads as on while its panel is open, and its tooltip steps aside. */
.doc-mermaid-actions button[aria-expanded='true'] {
  color: #4f46e5 !important;
  border-color: #818cf8 !important;
}

.doc-mermaid-actions button[aria-expanded='true']::before,
.doc-mermaid-actions button[aria-expanded='true']::after {
  display: none !important;
}

/* A look changed in the panel that nothing keeps yet — the foot's *Changed — not saved in the file* —
   is marked on the button too, so it is seen with the panel closed (CH-REQ-20261002-M §8): the foot's
   amber dot, at the button's top-right corner, clear of the icon. A background, not a pseudo-element:
   the button's ::before and ::after are its tooltip. The colour is declared once per scheme, here, and
   read by the foot's dot too. */
.doc-mermaid-viewer {
  --doc-mermaid-unsaved: #d97706;
}

:root:is([data-mermaid-scheme='dark'], [data-doc-scheme='dark']) .doc-mermaid-viewer {
  --doc-mermaid-unsaved: #f59e0b;
}

.doc-mermaid-viewer .doc-mermaid-toolbar .doc-mermaid-actions button[data-mermaid-action='customize'][data-unsaved] {
  background-image: radial-gradient(circle at calc(100% - 5px) 5px, var(--doc-mermaid-unsaved) 3.5px, transparent 4px) !important;
}

/* Under the button row, and pressable: the toolbar is `pointer-events: none` so a drag on the canvas
   beneath it pans, and only its button row opts back in. Without this every press on the panel fell
   through to the canvas — and counted as a press outside, closing it (CH-REQ-20260929-A §9.1). */
.doc-mermaid-panel-host {
  position: absolute !important;
  top: 100% !important;
  right: 0 !important;
  pointer-events: auto !important;
}

.doc-mermaid-panel {
  position: absolute !important;
  top: 8px !important;
  right: 0 !important;
  width: 304px !important;
  max-width: calc(100vw - 32px) !important;
  /* Tall enough for a tab's rows on an ordinary screen; a short one scrolls — and never taller than the
     room the reader can see below it (fitMermaidPanel, CH-REQ-20260929-A §15), so its foot stays in sight. */
  max-height: min(80vh, 620px, var(--doc-mermaid-panel-room, 620px)) !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
  padding: 12px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16) !important;
  color: #334155 !important;
  font-family: var(--font-body, system-ui, sans-serif) !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  text-align: left !important;
  cursor: auto !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

.doc-mermaid-viewer:fullscreen .doc-mermaid-panel {
  max-height: min(calc(100vh - 80px), var(--doc-mermaid-panel-room, 100vh)) !important;
}

.doc-mermaid-panel-row + .doc-mermaid-panel-row {
  margin-top: 12px !important;
}

.doc-mermaid-panel-label {
  display: flex !important;
  /* A hint that does not fit beside its row's name goes under it, never against it: on the blog's
     type, "SpectrumHues by the flow…" ran together (CH-REQ-20260929-A §30). */
  flex-wrap: wrap !important;
  column-gap: 12px !important;
  justify-content: space-between !important;
  line-height: 1.35 !important;
  margin: 0 0 6px !important;
  color: #64748b !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

.doc-mermaid-panel-label span {
  margin: 0 !important;
  padding: 0 !important;
  font-size: inherit !important;
  line-height: inherit !important;
  color: #94a3b8 !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.doc-mermaid-panel-swatches {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

.doc-mermaid-panel button {
  margin: 0 !important;
  font: inherit !important;
  line-height: 1.35 !important;
  cursor: pointer !important;
}

.doc-mermaid-panel button:focus-visible {
  outline: 2px solid #6366f1 !important;
  outline-offset: 1px !important;
}

.doc-mermaid-panel-swatch {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 5px !important;
  padding: 6px 8px 7px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  color: #334155 !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.doc-mermaid-panel-swatch:hover {
  border-color: #94a3b8 !important;
}

.doc-mermaid-panel-swatch[aria-pressed='true'] {
  border-color: #6366f1 !important;
  box-shadow: inset 0 0 0 1px #6366f1 !important;
  color: #0f172a !important;
  font-weight: 600 !important;
}

/* A theme's range — the stretch of the hue wheel Spectrum sweeps with it. */
.doc-mermaid-panel-range {
  display: block !important;
  height: 6px !important;
  border-radius: 999px !important;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.1) !important;
}

/* A choice that shows itself: its picture above its name. */
.doc-mermaid-panel-segments.has-pictures button,
.doc-mermaid-panel-cards button {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 3px !important;
  padding: 6px 2px 5px !important;
}

.doc-mermaid-panel-picture {
  display: flex !important;
  justify-content: center !important;
  line-height: 0 !important;
  opacity: 0.85;
}

button[aria-pressed='true'] > .doc-mermaid-panel-picture {
  opacity: 1;
}

/* Motion, playing in small: a card each, three to a row. */
.doc-mermaid-panel-cards {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

.doc-mermaid-panel-cards button {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  color: #475569 !important;
}

.doc-mermaid-panel-cards button[aria-pressed='true'] {
  border-color: #6366f1 !important;
  box-shadow: inset 0 0 0 1px #6366f1 !important;
  color: #0f172a !important;
  font-weight: 600 !important;
}

.doc-mermaid-panel-preview {
  width: 100% !important;
  max-width: 62px !important;
  height: auto !important;
  overflow: visible !important;
}

.doc-mermaid-panel-track {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.5px !important;
  opacity: 0.35;
}

/* A preview is not the diagram: a reader who asked for stillness sees it still. */
@media (prefers-reduced-motion: reduce) {
  .doc-mermaid-panel .doc-mermaid-motion > * {
    animation-play-state: paused !important;
  }
}

/* One row of equal columns, however many options: five motions wrapped one onto a line of its own. */
.doc-mermaid-panel-segments {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: minmax(0, 1fr) !important;
  gap: 2px !important;
  padding: 2px !important;
  background: #f1f5f9 !important;
  border-radius: 8px !important;
}

.doc-mermaid-panel-segments button {
  min-width: 0 !important;
  padding: 5px 2px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 6px !important;
  color: #475569 !important;
  white-space: nowrap !important;
}

.doc-mermaid-panel-segments button:hover {
  color: #0f172a !important;
}

.doc-mermaid-panel-segments button[aria-pressed='true'] {
  background: #ffffff !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12) !important;
  color: #0f172a !important;
  font-weight: 600 !important;
}

/* Style / Animate: the panel's two halves, above everything else in it. */
/* The tabs, pinned at the top as the foot is at the bottom (CH-REQ-20260929-A §36): edge to edge over
   the panel's padding, on its own ground, so the options scroll under them — stuck at the panel's
   edge, not its padding's, as a sticky box keeps clear of the padding (12px). Named with the panel and
   `:first-child`, to outrank the document's `.markdown-body div:first-child` reset (0,2,1), which took
   its top margin and dropped the tabs 12px until the options scrolled. */
.doc-mermaid-panel > .doc-mermaid-panel-head:first-child {
  position: sticky !important;
  top: -12px !important;
  z-index: 1 !important;
  margin: -12px -12px 4px !important;
  padding: 12px 12px 8px !important;
  background: #ffffff !important;
}

/* Options scrolled up under the tabs: a shadow says so, as the foot's does below. */
.doc-mermaid-panel[data-scrolled] > .doc-mermaid-panel-head:first-child {
  box-shadow: 0 10px 14px -10px rgba(15, 23, 42, 0.28) !important;
}

.doc-mermaid-panel-note {
  margin: 0 !important;
  color: #64748b !important;
}

/* A slider and what it is set to (§12): Speed, as a multiple of the normal pace. */
.doc-mermaid-panel-slider {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
}

.doc-mermaid-panel-slider input[type='range'] {
  width: 100% !important;
  height: 18px !important;
  margin: 0 !important;
  accent-color: #6366f1 !important;
  cursor: pointer !important;
}

.doc-mermaid-panel-slider-value {
  min-width: 3.2em !important;
  color: #334155 !important;
  font-variant-numeric: tabular-nums !important;
  font-weight: 600 !important;
  text-align: right !important;
}

/* The dark frame. */
:root:is([data-mermaid-scheme='dark'], [data-doc-scheme='dark']) .doc-mermaid-actions button[aria-expanded='true'] {
  color: #a5b4fc !important;
  border-color: #6366f1 !important;
}

:root:is([data-mermaid-scheme='dark'], [data-doc-scheme='dark']) .doc-mermaid-panel {
  background: #161b22 !important;
  border-color: #30363d !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5) !important;
  color: #c9d1d9 !important;
}

:root:is([data-mermaid-scheme='dark'], [data-doc-scheme='dark']) .doc-mermaid-panel > .doc-mermaid-panel-head:first-child {
  background: #161b22 !important;
}

:root:is([data-mermaid-scheme='dark'], [data-doc-scheme='dark']) .doc-mermaid-panel[data-scrolled] > .doc-mermaid-panel-head:first-child {
  box-shadow: 0 10px 14px -10px rgba(0, 0, 0, 0.7) !important;
}

:root:is([data-mermaid-scheme='dark'], [data-doc-scheme='dark']) .doc-mermaid-panel-label {
  color: #8b949e !important;
}

:root:is([data-mermaid-scheme='dark'], [data-doc-scheme='dark']) .doc-mermaid-panel-label span,
:root:is([data-mermaid-scheme='dark'], [data-doc-scheme='dark']) .doc-mermaid-panel-note {
  color: #6e7681 !important;
}

:root:is([data-mermaid-scheme='dark'], [data-doc-scheme='dark']) .doc-mermaid-panel-swatch {
  background: #0d1117 !important;
  border-color: #30363d !important;
  color: #c9d1d9 !important;
}

:root:is([data-mermaid-scheme='dark'], [data-doc-scheme='dark']) .doc-mermaid-panel-swatch:hover {
  border-color: #6e7681 !important;
}

:root:is([data-mermaid-scheme='dark'], [data-doc-scheme='dark']) .doc-mermaid-panel-swatch[aria-pressed='true'] {
  border-color: #818cf8 !important;
  box-shadow: inset 0 0 0 1px #818cf8 !important;
  color: #f0f6fc !important;
}

:root:is([data-mermaid-scheme='dark'], [data-doc-scheme='dark']) .doc-mermaid-panel-segments {
  background: #0d1117 !important;
}

:root:is([data-mermaid-scheme='dark'], [data-doc-scheme='dark']) .doc-mermaid-panel-cards button {
  background: #0d1117 !important;
  border-color: #30363d !important;
  color: #8b949e !important;
}

:root:is([data-mermaid-scheme='dark'], [data-doc-scheme='dark']) .doc-mermaid-panel-cards button[aria-pressed='true'] {
  border-color: #818cf8 !important;
  box-shadow: inset 0 0 0 1px #818cf8 !important;
  color: #f0f6fc !important;
}

:root:is([data-mermaid-scheme='dark'], [data-doc-scheme='dark']) .doc-mermaid-panel-segments button {
  color: #8b949e !important;
}

:root:is([data-mermaid-scheme='dark'], [data-doc-scheme='dark']) .doc-mermaid-panel-segments button[aria-pressed='true'] {
  background: #30363d !important;
  box-shadow: none !important;
  color: #f0f6fc !important;
}

:root:is([data-mermaid-scheme='dark'], [data-doc-scheme='dark']) .doc-mermaid-panel-slider input[type='range'] {
  accent-color: #818cf8 !important;
}

:root:is([data-mermaid-scheme='dark'], [data-doc-scheme='dark']) .doc-mermaid-panel-slider-value {
  color: #c9d1d9 !important;
}

/* Paper has no panel. */
@media print {
  .doc-mermaid-panel-host {
    display: none !important;
  }
}