/*
 * doc-mermaid-panel-foot.css — the foot of a diagram's Customize panel and its ways out of it: how long
 * what the panel shows lasts, with its two ways back as icons beside it (CH-REQ-20261029-A); the saves (Save for all diagrams; Save here and
 * New diagram file on one line, with the Prisment-only mark and its note), each saying what it
 * keeps, and Share as GIF / Save as image as the list's last line; Try
 * Prisment defaults and its trial (CH-REQ-20260929-A §8, §11–13, §15, §36; CH-REQ-20260929-C).
 *
 * Split out of doc-mermaid-customize.css, which draws the panel itself, at the 500-line cap. Loaded
 * after it by doc-framework.css, and on its own beside it by the precompiled pages (/help, the blog):
 * like it, no @import, every selector mermaid-scoped, and a frame dark wherever the diagram is drawn dark.
 */
/* Pinned under the options (§15): the panel scrolls on a short screen, and a save must never be under
   that scroll. Edge to edge over the panel's own padding, on its own ground, so rows pass behind it —
   stuck at the panel's edge, not its padding's: a sticky box keeps clear of the padding (12px). */
.doc-mermaid-panel-foot {
  position: sticky !important;
  bottom: -12px !important;
  z-index: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin: 10px -12px -12px !important;
  padding: 8px 12px 10px !important;
  border-top: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
}

/* More options wait below the foot (panelRows.js marks it as the panel scrolls): a shadow says the
   row it cuts is scrolled, not broken (§36). */
.doc-mermaid-panel[data-more-below] .doc-mermaid-panel-foot {
  box-shadow: 0 -10px 14px -10px rgba(15, 23, 42, 0.28) !important;
}

/* How long what the panel shows lasts (§36): a quiet line, its ways back as icons beside it when there is something to go back from. */
.doc-mermaid-panel-status {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  min-height: 20px !important;
}

/* The ways back (CH-REQ-20261029-A): two labelled buttons side by side on a row of their own — a glyph and a word each, so what they do
   is read without pointing — told apart by colour as well: Revert changes blue, a step back; Clear styles red, which wipes the look out.
   Each a soft tint of its colour, stronger under the pointer. Alone, one takes the row. */
.doc-mermaid-panel-status {
  flex-wrap: wrap !important;
}

.doc-mermaid-panel-reverts {
  display: flex !important;
  flex: 1 1 100% !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 0 !important;
}

.doc-mermaid-panel-status .doc-mermaid-panel-reverts button {
  --way: #2563eb;
  position: relative !important;
  display: inline-flex !important;
  flex: 1 1 0 !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  height: 28px !important;
  padding: 0 10px !important;
  margin: 0 !important;
  border: 1px solid color-mix(in srgb, var(--way) 30%, transparent) !important;
  border-radius: 8px !important;
  background: color-mix(in srgb, var(--way) 9%, transparent) !important;
  color: var(--way) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}

.doc-mermaid-panel-status .doc-mermaid-panel-reverts button[data-mermaid-choose='reset'] {
  --way: #dc2626;
}

.doc-mermaid-panel-status .doc-mermaid-panel-reverts button:hover,
.doc-mermaid-panel-status .doc-mermaid-panel-reverts button:focus-visible {
  background: color-mix(in srgb, var(--way) 18%, transparent) !important;
  border-color: color-mix(in srgb, var(--way) 58%, transparent) !important;
  color: var(--way) !important;
}

.doc-mermaid-panel-status .doc-mermaid-panel-reverts button svg {
  flex: none !important;
  width: 15px !important;
  height: 15px !important;
  pointer-events: none !important;
}

.doc-mermaid-panel-status .doc-mermaid-panel-reverts button:focus-visible {
  outline: 2px solid var(--way) !important;
  outline-offset: 1px !important;
}

.doc-mermaid-panel-revert-label {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* What each does exactly, over it at once on hover and on keyboard focus: its name in its colour, a line under it, and an arrow to the
   button. The button's own child, hung above it — over the options, as the Prisment-only mark's note is — from the button's left edge,
   or its right where it is the second, so it never leaves the panel. */
.doc-mermaid-panel-tip {
  /* The script hides it inline until this is loaded (panelFoot.js); this shows it, by its visibility. */
  display: block !important;
  position: absolute !important;
  bottom: calc(100% + 10px) !important;
  left: 0 !important;
  z-index: 3 !important;
  width: 14.5rem !important;
  max-width: calc(100vw - 2rem) !important;
  padding: 0.5rem 0.625rem !important;
  border: 1px solid var(--border-color, #d0d7de) !important;
  border-left: 3px solid var(--way) !important;
  border-radius: var(--doc-radius-sm, 6px) !important;
  background: var(--card-bg, #ffffff) !important;
  box-shadow: var(--doc-shadow-md, 0 4px 12px rgba(15, 23, 42, 0.18)) !important;
  color: var(--text-color, #24292f) !important;
  font-size: var(--doc-type-footnote, 11px) !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  text-align: left !important;
  white-space: normal !important;
  pointer-events: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.12s ease, visibility 0.12s ease !important;
}

.doc-mermaid-panel-reverts button:last-child:not(:first-child) .doc-mermaid-panel-tip {
  right: 0 !important;
  left: auto !important;
}

.doc-mermaid-panel-tip strong {
  display: block !important;
  margin-bottom: 2px !important;
  color: var(--way) !important;
  font-size: var(--doc-type-footnote, 11px) !important;
  font-weight: 700 !important;
}

.doc-mermaid-panel-tip::after {
  content: '' !important;
  position: absolute !important;
  left: 22px !important;
  bottom: -5px !important;
  width: 8px !important;
  height: 8px !important;
  border: solid var(--border-color, #d0d7de) !important;
  border-width: 0 1px 1px 0 !important;
  background: var(--card-bg, #ffffff) !important;
  transform: rotate(45deg) !important;
}

.doc-mermaid-panel-reverts button:last-child:not(:first-child) .doc-mermaid-panel-tip::after {
  right: 22px !important;
  left: auto !important;
}

.doc-mermaid-panel-reverts button:is(:hover, :focus-visible) .doc-mermaid-panel-tip {
  opacity: 1 !important;
  visibility: visible !important;
}

.doc-mermaid-panel-status p {
  margin: 0 !important;
  color: #64748b !important;
  font-size: 11px !important;
}

/* A change the page will forget on reload, or Prisment's defaults on trial: marked, so it reads as not
   kept yet. */
.doc-mermaid-panel-status:is(.is-changed, .is-trial) p::before {
  content: '' !important;
  display: inline-block !important;
  width: 6px !important;
  height: 6px !important;
  margin: 0 6px 1px 0 !important;
  border-radius: 50% !important;
  /* The Customize button's dot too, one colour per scheme, declared in `doc-mermaid-customize.css`;
     the fallback is its light value, for the gate that reads each file alone. */
  background: var(--doc-mermaid-unsaved, #d97706) !important;
  vertical-align: middle !important;
}

/* Prisment's defaults on trial (§12): what the page is showing, above its two ways out. */
.doc-mermaid-panel-status.is-trial p {
  color: #b45309 !important;
}

/* The saves, one list, a line each (§36): a glyph in the colour of its purpose, the name, and beside it what it keeps. */
.doc-mermaid-panel-saves {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
}

.doc-mermaid-panel-saves button {
  --way: #475569;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  width: 100% !important;
  min-height: 28px !important;
  padding: 5px 10px !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #334155 !important;
  font-weight: 600 !important;
  text-align: left !important;
}

.doc-mermaid-panel-saves > * + * {
  border-top: 1px solid #e2e8f0 !important;
}

/* Save here and New diagram file share a line, to spare the panel's height
   (CH-REQ-20261002-M): halves of it, a rule between, the Prisment-only mark at its end. */
.doc-mermaid-panel-save-pair {
  display: flex !important;
  align-items: stretch !important;
  min-width: 0 !important;
}

.doc-mermaid-panel-save-pair button {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

.doc-mermaid-panel-save-pair button + button {
  border-left: 1px solid #e2e8f0 !important;
}

/* Prisment only: the look a save keeps, its motion above all, is drawn by Prisment alone. A warning's
   amber, quiet beside the names; its note, below, says the rest. */
.doc-mermaid-panel-prisment-only {
  display: inline-flex !important;
  flex: none !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 8px !important;
  color: #b45309 !important;
  cursor: help !important;
}

.doc-mermaid-panel-status .doc-mermaid-panel-prisment-only {
  margin-left: auto !important;
  padding: 0 !important;
}

/* Its note, at once on hover, focus or a tap — a title waits for a still mouse and never comes on
   touch. Hung from the foot, the nearest box with a position (the mark and the saves list have none),
   so the list's own clipping cannot cut it: the foot's width, just above it, over the options. */
.doc-mermaid-panel-prisment-only::after,
.doc-mermaid-panel-saves button[data-tip]::after {
  content: attr(data-tip) !important;
  position: absolute !important;
  right: 12px !important;
  bottom: calc(100% + 0.25rem) !important;
  left: 12px !important;
  z-index: 2 !important;
  /* The viewer's one tooltip — the Direction row's card (doc-mermaid-customize.css). */
  padding: 0.375rem 0.625rem !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--doc-radius-sm) !important;
  background: var(--card-bg) !important;
  box-shadow: var(--doc-shadow-sm) !important;
  color: var(--text-color) !important;
  font-size: var(--doc-type-footnote) !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
  text-align: left !important;
  white-space: normal !important;
  pointer-events: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.15s ease, visibility 0.15s ease !important;
}

.doc-mermaid-panel-saves button[data-tip]::after {
  border-left: 3px solid var(--way) !important;
  font-weight: 400 !important;
}

.doc-mermaid-panel-prisment-only:is(:hover, :focus)::after,
.doc-mermaid-panel-saves button[data-tip]:is(:hover, :focus-visible)::after {
  opacity: 1 !important;
  visibility: visible !important;
}

/* The purposes, told apart by colour as the ways back are: green keeps a look, violet makes a file of it, indigo takes a picture out of
   the panel, blue goes back from a trial. Under the pointer the row takes a tint of its colour. */
.doc-mermaid-panel-saves button[data-mermaid-choose='default'],
.doc-mermaid-panel-saves button[data-mermaid-choose='prisment-keep'] {
  --way: #15803d;
}

.doc-mermaid-panel-saves button[data-mermaid-choose='save-file'],
.doc-mermaid-panel-saves button[data-mermaid-choose='open-file'] {
  --way: #7c3aed;
}

.doc-mermaid-panel-saves button.doc-mermaid-panel-share {
  --way: #4338ca;
}

.doc-mermaid-panel-saves button[data-mermaid-choose='prisment-back'] {
  --way: #2563eb;
}

.doc-mermaid-panel-saves button svg {
  flex: none !important;
  width: 15px !important;
  height: 15px !important;
  color: var(--way) !important;
  pointer-events: none !important;
}

.doc-mermaid-panel-saves button:hover,
.doc-mermaid-panel-saves button:focus-visible {
  background: color-mix(in srgb, var(--way) 8%, transparent) !important;
}

.doc-mermaid-panel-saves button span {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.doc-mermaid-panel-saves button small {
  flex: none !important;
  margin-left: auto !important;
  color: #64748b !important;
  font-size: 11px !important;
  font-weight: 400 !important;
}

/* Try Prisment defaults under the saves, and the status line's icons: quiet. */
.doc-mermaid-panel-links {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0 8px !important;
}

.doc-mermaid-panel-status button,
.doc-mermaid-panel-links button {
  flex: none !important;
  padding: 4px 8px !important;
  background: none !important;
  border: 0 !important;
  border-radius: 6px !important;
  color: #475569 !important;
}

/* Their words, not their padding, line up with the edges of the rows around them. */
.doc-mermaid-panel-status button {
  margin-right: -8px !important;
}

.doc-mermaid-panel-links button {
  margin-left: -8px !important;
}

.doc-mermaid-panel-status button:hover,
.doc-mermaid-panel-links button:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

/* Share as GIF / Save as image (CH-REQ-20260929-C): the list's last line, pinned with it (§36) — a way
   out of the panel rather than a way to keep a look, so its name takes the accent. */
.doc-mermaid-panel-saves .doc-mermaid-panel-share span {
  color: #4338ca !important;
}

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

:root:is([data-mermaid-scheme='dark'], [data-doc-scheme='dark']) .doc-mermaid-panel-foot {
  border-top-color: #30363d !important;
  background: #161b22 !important;
}

:root:is([data-mermaid-scheme='dark'], [data-doc-scheme='dark']) .doc-mermaid-panel[data-more-below] .doc-mermaid-panel-foot {
  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-status button,
:root:is([data-mermaid-scheme='dark'], [data-doc-scheme='dark']) .doc-mermaid-panel-links button {
  color: #8b949e !important;
}

:root:is([data-mermaid-scheme='dark'], [data-doc-scheme='dark']) .doc-mermaid-panel-status button:hover,
:root:is([data-mermaid-scheme='dark'], [data-doc-scheme='dark']) :root:is([data-mermaid-scheme='dark'], [data-doc-scheme='dark']) .doc-mermaid-panel-links button:hover {
  background: #21262d !important;
}

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

:root:is([data-mermaid-scheme='dark'], [data-doc-scheme='dark']) .doc-mermaid-panel-status.is-trial p {
  color: #fcd34d !important;
}

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

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

:root:is([data-mermaid-scheme='dark'], [data-doc-scheme='dark']) .doc-mermaid-panel-saves > * + *,
:root:is([data-mermaid-scheme='dark'], [data-doc-scheme='dark']) .doc-mermaid-panel-save-pair button + button {
  border-color: #30363d !important;
}

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

/* The same two ways in the dark scheme: lighter hues, and over the foot's own button colours, which are greys there. */
:root:is([data-mermaid-scheme='dark'], [data-doc-scheme='dark']) .doc-mermaid-panel-status .doc-mermaid-panel-reverts button {
  --way: #58a6ff;
  color: var(--way) !important;
  background: color-mix(in srgb, var(--way) 14%, transparent) !important;
}

:root:is([data-mermaid-scheme='dark'], [data-doc-scheme='dark']) .doc-mermaid-panel-status .doc-mermaid-panel-reverts button[data-mermaid-choose='reset'] {
  --way: #f85149;
}

:root:is([data-mermaid-scheme='dark'], [data-doc-scheme='dark']) .doc-mermaid-panel-status .doc-mermaid-panel-reverts button:is(:hover, :focus-visible) {
  color: var(--way) !important;
  background: color-mix(in srgb, var(--way) 26%, transparent) !important;
}

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

:root:is([data-mermaid-scheme='dark'], [data-doc-scheme='dark']) .doc-mermaid-panel-saves button[data-mermaid-choose='default'],
:root:is([data-mermaid-scheme='dark'], [data-doc-scheme='dark']) .doc-mermaid-panel-saves button[data-mermaid-choose='prisment-keep'] {
  --way: #3fb950;
}

:root:is([data-mermaid-scheme='dark'], [data-doc-scheme='dark']) .doc-mermaid-panel-saves button[data-mermaid-choose='save-file'],
:root:is([data-mermaid-scheme='dark'], [data-doc-scheme='dark']) .doc-mermaid-panel-saves button[data-mermaid-choose='open-file'] {
  --way: #a78bfa;
}

:root:is([data-mermaid-scheme='dark'], [data-doc-scheme='dark']) .doc-mermaid-panel-saves button.doc-mermaid-panel-share {
  --way: #a5b4fc;
}

:root:is([data-mermaid-scheme='dark'], [data-doc-scheme='dark']) .doc-mermaid-panel-saves button[data-mermaid-choose='prisment-back'] {
  --way: #58a6ff;
}

:root:is([data-mermaid-scheme='dark'], [data-doc-scheme='dark']) .doc-mermaid-panel-saves button:hover {
  background: color-mix(in srgb, var(--way) 14%, transparent) !important;
}

:root:is([data-mermaid-scheme='dark'], [data-doc-scheme='dark']) .doc-mermaid-panel-saves .doc-mermaid-panel-share span {
  color: #a5b4fc !important;
}