/*
 * 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 Reset beside it; 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: 8px !important;
  margin: 12px -12px -12px !important;
  padding: 10px 12px 12px !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, Reset beside it when there is a change. */
.doc-mermaid-panel-status {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  min-height: 20px !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): 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 {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 8px !important;
  width: 100% !important;
  min-height: 30px !important;
  padding: 6px 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 {
  content: attr(data-tip) !important;
  position: absolute !important;
  right: 12px !important;
  bottom: calc(100% + 6px) !important;
  left: 12px !important;
  z-index: 2 !important;
  padding: 8px 10px !important;
  border-radius: 6px !important;
  background: #0f172a !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25) !important;
  color: #ffffff !important;
  font-size: 11px !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-prisment-only:is(:hover, :focus)::after {
  opacity: 1 !important;
  visibility: visible !important;
}

.doc-mermaid-panel-saves button:hover {
  background: #f8fafc !important;
}

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

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

/* Reset beside the status, and Try Prisment defaults under the saves: quiet. */
.doc-mermaid-panel-links {
  display: flex !important;
  gap: 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-status button[aria-expanded='true'],
.doc-mermaid-panel-links button:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

/* Reset is a link that opens what it would do (CH-REQ-20261002-M §10): a ▾ after its name, turned over
   while the list is open, which is a list like the saves, below the status. It looks as it does under the
   pointer while it is open. */
.doc-mermaid-panel-status button[aria-haspopup]::after {
  content: '' !important;
  display: inline-block !important;
  width: 5px !important;
  height: 5px !important;
  margin: 0 0 3px 7px !important;
  border: solid currentColor !important;
  border-width: 0 1.5px 1.5px 0 !important;
  transform: rotate(45deg) !important;
}

.doc-mermaid-panel-status button[aria-expanded='true']::after {
  margin-bottom: -2px !important;
  transform: rotate(225deg) !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']) .doc-mermaid-panel-status button[aria-expanded='true'],
: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']) .doc-mermaid-panel-status button[aria-expanded='true'],
: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;
}

/* On a dark panel the note is light, so it stands off the ground. */
:root:is([data-mermaid-scheme='dark'], [data-doc-scheme='dark']) .doc-mermaid-panel-prisment-only::after {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

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

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