/* An in-flow tray keeps forms and navigation unobscured. */
html[data-conference-demo] #demo-simulations {
  flex: 1 0 100%;
  min-width: 0;
  width: 100%;
  color: var(--stz-white);
  font: var(--stz-weight-regular) var(--stz-size-caption)/1.45 var(--stz-font-body);
}
html[data-conference-demo] #demo-simulations summary {
  cursor: pointer;
  width: fit-content;
  padding: var(--stz-space-2) 0;
  font-weight: 700;
  font-size: var(--stz-size-small);
}
html[data-conference-demo] .demo-simulation-body {
  max-height: 35dvh;
  overflow-y: auto;
  padding: var(--stz-space-1) var(--stz-space-1) var(--stz-space-2);
  scrollbar-width: thin;
}
html[data-conference-demo] .demo-simulation-intro { margin: 0 0 var(--stz-space-3); color: var(--stz-gray-300); }
html[data-conference-demo] .demo-simulation-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: var(--stz-space-2);
}
html[data-conference-demo] :is(.showcase-banner, #demo-banner) .demo-simulation-controls button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 58px;
  text-align: left;
  background: var(--stz-midnight-900) !important;
  color: var(--stz-white) !important;
  border: 1px solid var(--stz-gray-500) !important;
  padding: var(--stz-space-3) var(--stz-space-4);
  white-space: normal;
}
html[data-conference-demo] .demo-simulation-controls button span { color: var(--stz-gray-300); font-size: var(--stz-size-caption); }
html[data-conference-demo] :is(.showcase-banner, #demo-banner) .demo-simulation-controls button:hover { border-color: var(--stz-accent-400) !important; background: var(--stz-midnight-800) !important; }
html[data-conference-demo] #demo-simulations button:disabled { opacity: .6; cursor: progress; }
html[data-conference-demo] #demo-simulation-feed {
  margin: var(--stz-space-3) 0;
  padding: 0;
  list-style: none;
  max-height: 5.5rem;
  overflow-y: auto;
  overflow-wrap: anywhere;
}
html[data-conference-demo] #demo-simulation-feed li { padding: var(--stz-space-1) 0 var(--stz-space-1) var(--stz-space-3); border-left: 2px solid var(--stz-accent-600); }
html[data-conference-demo] #demo-simulation-feed li + li { margin-top: var(--stz-space-1); color: var(--stz-gray-300); }
html[data-conference-demo] :is(.showcase-banner, #demo-banner) .demo-simulation-reset { padding: var(--stz-space-2) var(--stz-space-3); min-height: 32px; font-size: var(--stz-size-caption); }

html[data-conference-demo="merchant"] #demo-pay-qr canvas { display: block; width: 148px; height: 148px; max-width: 100%; }