/* The mermaidify post: the GIF and the 3 demos. The demos keep the site's look (thin rules, square
   corners, one accent), with mermaidify's teal for what the reader found, amber for what it left
   out, and the four ink colors the app draws with, in both themes. */
:root {
  --mfy-accent: #1f7fa0;
  --mfy-on-accent: #ffffff;
  --mfy-warn: #c27a10;
  --mfy-dots: #d6d6d6;
  --mfy-ink-ink: #111111;
  --mfy-ink-amber: #b26b00;
  --mfy-ink-red: #c0392b;
  --mfy-ink-green: #1f7a5a;
  --mfy-ink-blue: #2d5bd1;
}

:root[data-resolved-theme="dark"] {
  --mfy-accent: #5cc3d6;
  --mfy-on-accent: #04161d;
  --mfy-warn: #f0b35a;
  --mfy-dots: #2e2e2e;
  --mfy-ink-ink: #f2f2f2;
  --mfy-ink-amber: #f0b35a;
  --mfy-ink-red: #ff8f80;
  --mfy-ink-green: #5dbb94;
  --mfy-ink-blue: #7aa2ff;
}

@media (prefers-color-scheme: dark) {
  :root[data-storage-free-theme="system"] {
    --mfy-accent: #5cc3d6;
    --mfy-on-accent: #04161d;
    --mfy-warn: #f0b35a;
    --mfy-dots: #2e2e2e;
    --mfy-ink-ink: #f2f2f2;
    --mfy-ink-amber: #f0b35a;
    --mfy-ink-red: #ff8f80;
    --mfy-ink-green: #5dbb94;
    --mfy-ink-blue: #7aa2ff;
  }
}

.mfy-post section > ul > li + li {
  margin-top: 0.35rem;
}

/* The GIF from the README, at its own width or the column's. */
.mfy-gif {
  max-width: 820px;
  margin: 0 0 2.5rem;
}

.mfy-gif img {
  display: block;
  width: 100%;
  max-width: 720px;
  height: auto;
  border: 1px solid var(--line);
}

.mfy-gif figcaption {
  max-width: 66ch;
  margin-top: 0.5rem;
  color: var(--faint);
  font-size: 0.9rem;
}

/* The demos. */
.mfy-demo {
  display: grid;
  gap: 0.75rem;
  max-width: 820px;
  margin: 1.6rem 0 1.9rem;
  padding: clamp(14px, 3vw, 22px);
  border: 1px solid var(--line);
  background: var(--accent-soft);
  font-variant-numeric: tabular-nums;
}

.mfy-demo p,
.mfy-demo pre {
  max-width: none;
}

.mfy-fallback {
  margin: 0;
  color: var(--muted);
}

.mfy-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.mfy-bar button,
.mfy-tabs button {
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background: var(--page);
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
}

.mfy-bar button:hover:not(:disabled),
.mfy-tabs button:hover {
  border-color: var(--accent);
}

.mfy-bar button:disabled {
  opacity: 0.45;
  cursor: default;
}

.mfy-kind {
  margin-left: auto;
  color: var(--faint);
  font-size: 0.92rem;
}

.mfy-kind select {
  padding: 0.3rem;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background: var(--page);
  color: var(--ink);
  font: inherit;
}

.mfy-pad {
  display: block;
  width: 100%;
  height: clamp(300px, 52vh, 460px);
  border: 1px solid var(--line);
  background: var(--page);
  touch-action: none;
  cursor: crosshair;
}

.mfy-read {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.mfy-out {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 760px) {
  .mfy-out {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }
}

.mfy-diagram {
  min-height: 3rem;
  padding: 0.5rem;
  border: 1px solid var(--line);
  background: var(--page);
  overflow-x: auto;
}

.mfy-diagram svg {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.mfy-diagram:empty,
.mfy-code:empty {
  display: none;
}

.mfy-code {
  margin: 0;
  padding: 0.75rem;
  border: 1px solid var(--line);
  background: var(--page);
  color: var(--ink);
  font: 0.82rem/1.5 var(--font-mono);
  overflow-x: auto;
  white-space: pre;
}

/* The demos set their own display, which would beat the hidden attribute. */
.mfy-demo [hidden] {
  display: none !important;
}

.mfy-xray-wrap {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 760px) {
  .mfy-xray-wrap {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    align-items: start;
  }
}

.mfy-xray {
  height: clamp(320px, 50vh, 440px);
  cursor: default;
}

.mfy-xray-side {
  display: grid;
  gap: 0.5rem;
  align-content: start;
}

.mfy-count {
  color: var(--faint);
  font-size: 0.9rem;
}

.mfy-step-title {
  margin: 0.5rem 0 0;
  font-size: 1.05rem;
  line-height: 1.3;
}

.mfy-step-text {
  margin: 0;
  color: var(--muted);
}

.mfy-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.mfy-tabs button[aria-pressed="true"] {
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 650;
}

.mfy-chart {
  display: grid;
  gap: 0.6rem;
}

.mfy-row {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  font-size: 0.95rem;
}

@media (max-width: 560px) {
  .mfy-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .mfy-track {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

.mfy-row-name {
  color: var(--muted);
}

.mfy-track {
  height: 0.9rem;
  border: 1px solid var(--line);
  background: var(--page);
}

.mfy-bar-fill {
  display: block;
  height: 100%;
  background: var(--mfy-accent);
}

.mfy-row-num {
  font-weight: 650;
  text-align: right;
}

.mfy-row-num small {
  color: var(--faint);
  font-weight: 400;
}

.mfy-note {
  margin: 0;
  color: var(--faint);
  font-size: 0.9rem;
}

@media (prefers-reduced-motion: no-preference) {
  .mfy-bar-fill {
    transition: width 400ms var(--ease);
  }
}