/* The live demo: the toolbar stays at the top, the footer is fixed at the bottom, and everything
   between them is one black console that streams the recorded `flash demo` run. */

body.is-demo .site-foot {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 20;
  margin: 0;
}

.m-demo {
  --demo-bg: #000;
  --demo-bar: #111;
  --demo-edge: #262626;
  --demo-say: #f5f5f5;        /* the explanation: bright white */
  --demo-head: #ffffff;
  --demo-scenario: #e879f9;   /* scenario title bar */
  --demo-step: #67e8f9;       /* a step inside a scenario */
  --demo-cmd: #4ade80;        /* the command: bright green */
  --demo-flag: #bbf7d0;       /* its --options */
  --demo-str: #fcd34d;        /* its quoted arguments */
  --demo-out: #bdbdbd;        /* what the command printed */
  --demo-dim: #8a8a8a;        /* notes and table rules */
  --demo-ok: #86efac;         /* ✓ a proven result */
  --demo-err: #f87171;        /* ✗ an error */
  --demo-warn: #facc15;       /* a warning */
  --demo-add: #4ade80;
  --demo-del: #f87171;
  --demo-hunk: #67e8f9;
  --demo-thumb: #4b4b4b;
  --demo-btn: #1c1c1c;
  --demo-btn-on: #4ade80;
}

.m-demo__stage {
  position: fixed; inset-inline: 0;
  top: var(--demo-top, var(--head-h)); bottom: var(--demo-bottom, 3.5rem);
  display: flex; flex-direction: column;
  background: var(--demo-bg); color: var(--demo-out);
  font-family: var(--font-mono); z-index: 10;
}

.m-demo__bar {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  background: var(--demo-bar); border-bottom: 1px solid var(--demo-edge);
  font-size: var(--fs-xs); color: var(--demo-dim);
}
.m-demo__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-demo__ctl {
  font: inherit; color: var(--demo-say); background: var(--demo-btn);
  border: 1px solid var(--demo-edge); border-radius: var(--radius-xs, 4px);
  padding: 2px 10px; cursor: pointer;
}
.m-demo__ctl:hover { border-color: var(--demo-btn-on); }

/* The console. Its own scrollbar is always there, so the reader can drag back through the run. */
.m-demo__screen {
  flex: 1; min-height: 0; margin: 0;
  overflow-y: scroll; overflow-x: hidden;
  padding: var(--sp-4) var(--sp-5);
  background: var(--demo-bg); border: 0; border-radius: 0;
  font-family: var(--font-mono); font-size: 0.86rem; line-height: 1.55;
  white-space: pre-wrap; overflow-wrap: anywhere; text-align: left;
  scrollbar-width: auto; scrollbar-color: var(--demo-thumb) var(--demo-bg);
}
.m-demo__screen::-webkit-scrollbar { width: 12px; }
.m-demo__screen::-webkit-scrollbar-track { background: var(--demo-bg); }
.m-demo__screen::-webkit-scrollbar-thumb { background: var(--demo-thumb); border-radius: 6px; border: 3px solid var(--demo-bg); }
.view .m-demo__screen code { background: none; color: var(--demo-out); font: inherit; padding: 0; }
.m-demo__screen code::after { content: "▍"; color: var(--demo-cmd); animation: m-demo-blink 1s steps(1) infinite; }

.view .m-demo__screen code .m-demo__l--say { color: var(--demo-say); }
.view .m-demo__screen code .m-demo__l--heading { color: var(--demo-head); font-weight: 700; }
.view .m-demo__screen code .m-demo__l--scenario { color: var(--demo-scenario); font-weight: 700; }
.view .m-demo__screen code .m-demo__l--step { color: var(--demo-step); font-weight: 700; }
.view .m-demo__screen code .m-demo__l--cmd { color: var(--demo-cmd); font-weight: 600; }
.view .m-demo__screen code .m-demo__l--cmd .f { color: var(--demo-flag); font-weight: 400; }
.view .m-demo__screen code .m-demo__l--cmd .q { color: var(--demo-str); font-weight: 400; }
.view .m-demo__screen code .m-demo__l--out, .view .m-demo__screen code .m-demo__l--td { color: var(--demo-out); }
.view .m-demo__screen code .m-demo__l--th { color: var(--demo-say); font-weight: 700; }
.view .m-demo__screen code .m-demo__l--rule, .view .m-demo__screen code .m-demo__l--note { color: var(--demo-dim); }
.view .m-demo__screen code .m-demo__l--ok { color: var(--demo-ok); }
.view .m-demo__screen code .m-demo__l--err { color: var(--demo-err); font-weight: 600; }
.view .m-demo__screen code .m-demo__l--warn { color: var(--demo-warn); }
.view .m-demo__screen code .m-demo__l--add { color: var(--demo-add); }
.view .m-demo__screen code .m-demo__l--del { color: var(--demo-del); }
.view .m-demo__screen code .m-demo__l--hunk { color: var(--demo-hunk); }

/* One button per scenario; the one playing is lit. */
.m-demo__scenarios {
  border-top: 1px solid var(--demo-edge); background: var(--demo-bar);
  padding: var(--sp-2) var(--sp-4);
  overflow-x: auto;
}
.m-demo__scenarios ol { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; justify-content: center; min-width: max-content; }
.m-demo__sc {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  min-width: 2.2rem; padding: 4px 6px; cursor: pointer;
  color: var(--demo-say); background: var(--demo-btn);
  border: 1px solid var(--demo-edge); border-radius: var(--radius-xs, 4px);
}
.m-demo__sc:hover, .m-demo__sc:focus-visible { border-color: var(--demo-btn-on); outline: none; }
.m-demo__sc[aria-current="true"] { background: var(--demo-btn-on); color: #000; border-color: var(--demo-btn-on); font-weight: 700; }

.m-demo__tip {
  position: fixed; z-index: 30; max-width: min(26rem, calc(100vw - 2rem));
  padding: var(--sp-3) var(--sp-4);
  background: #0d0d0d; color: var(--demo-say);
  border: 1px solid var(--demo-btn-on); border-radius: var(--radius-sm, 6px);
  box-shadow: 0 10px 30px rgb(0 0 0 / .6);
  font-family: var(--font-sans, system-ui, sans-serif); font-size: var(--fs-sm, .9rem); line-height: 1.45;
  pointer-events: none;
}
.m-demo__tip strong { display: block; margin-bottom: 4px; color: var(--demo-cmd); }

@keyframes m-demo-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .m-demo__screen code::after { animation: none; } }
@media (max-width: 40rem) {
  .m-demo__screen { font-size: 0.74rem; padding: var(--sp-3); }
  .m-demo__scenarios ol { justify-content: flex-start; }
}