/* Book-native controls shared by original-artwork lessons. */
.mlsys-original-player {
  --original-border: var(--bs-border-color, #cdd3d8);
  --original-accent: var(--bs-primary, #2675d8);
  color: inherit;
  text-align: left;
  padding: 1rem;
  min-width: 0;
  overflow-wrap: anywhere;
}
.mlsys-original-player .mlsys-original-title { color: inherit; border: none; padding: 0; font: inherit; font-weight: 700; font-size: 1.08em; margin: 0 0 .4rem; }
.mlsys-original-player .mlsys-original-scope { font-size: .88em; line-height: 1.45; margin: 0 0 .8rem; }
.mlsys-original-player .mlsys-original-controls { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .5rem; }
.mlsys-original-player button, .mlsys-original-player select {
  font: inherit;
  color: inherit;
  background: var(--bs-body-bg, #fff);
  border: 1px solid var(--original-border);
  border-radius: .2rem;
}
.mlsys-original-player button { padding: .4rem .7rem; min-height: 2.5rem; cursor: pointer; }
.mlsys-original-player button:disabled { opacity: .5; cursor: default; }
.mlsys-original-player :is(button, select, summary):focus-visible, .mlsys-original-player:focus-visible { outline: 2px solid var(--original-accent); outline-offset: 3px; }
.mlsys-original-player .mlsys-original-sequence { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; font-size: .9em; margin: 0; min-width: 0; overflow: hidden; }
.mlsys-original-player .mlsys-original-sequence select { box-sizing: border-box; overflow: hidden; min-inline-size: 0; width: 0; min-width: 0; max-width: 100%; flex: 1 1 0%; padding: .3rem; text-overflow: ellipsis; }
.mlsys-original-player .mlsys-original-shortcuts { font-size: .76em; line-height: 1.5; margin: .4rem 0 .75rem; color: var(--bs-secondary-color, #586571); }
.mlsys-original-player .mlsys-original-narration { border-left: 3px solid var(--original-accent); padding: .6rem .8rem; margin-bottom: .75rem; background: var(--bs-tertiary-bg, #f4f6f8); font-size: .9em; }
.mlsys-original-player .mlsys-original-narration strong { display: block; }
.mlsys-original-player .mlsys-original-narration p { margin: .25rem 0 0; }
.mlsys-original-player .mlsys-original-stage { min-width: 0; }
.mlsys-original-player .mlsys-original-stage > svg { display: block; width: 100%; height: auto; max-width: 100%; }
.mlsys-original-player .mlsys-original-details { font-size: .88em; }
.mlsys-original-player .mlsys-original-details:empty { display: none; }
@media (max-width: 540px) { .mlsys-original-player { padding: .65rem; } }
@media print { .mlsys-original-player { display: none !important; } }

.mlsys-original-dialog { box-sizing: border-box; margin: 0; color: var(--bs-body-color, #222); background: var(--bs-body-bg, #fff); border: 1px solid var(--bs-border-color, #cdd3d8); border-radius: 0; padding: .75rem; width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; overflow: auto; }
.mlsys-original-dialog::backdrop { background: rgb(0 0 0 / .55); }
.mlsys-original-dialog-close { position: sticky; top: 0; z-index: 25; display: block; margin-left: auto; padding: .45rem .7rem; color: inherit; background: inherit; border: 1px solid var(--bs-border-color, #cdd3d8); border-radius: .2rem; font: inherit; }
.mlsys-original-dialog-close:focus-visible { outline: 2px solid var(--bs-primary, #2675d8); outline-offset: 3px; }
@media print { .mlsys-original-dialog { display: none !important; } }

/* Keep the chapter's floating navigation from covering an inspected diagram. */
body:has(figure[data-figure-view="explore"] .mlsys-original-player) #quarto-back-to-top { display:none!important; }

/* Keep only navigation and a compact state cue beside the inspected mechanism. */
.mlsys-original-player .mlsys-original-controls {
  position: sticky;
  top: var(--mlsys-original-header-offset, 0px);
  z-index: 20;
  padding-block: .35rem;
  background: var(--bs-body-bg, #fff);
  border-bottom: 1px solid var(--original-border);
  box-shadow: 0 3px 5px rgb(0 0 0 / .06);
}
.mlsys-original-player .mlsys-original-current-cue {
  display: flex;
  flex: 1 0 100%;
  gap: .5rem;
  align-items: baseline;
  min-width: 0;
  font-size: .72em;
  line-height: 1.3;
}
.mlsys-original-player .mlsys-original-cue-step { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mlsys-original-player .mlsys-original-cue-state { flex: none; color: var(--bs-secondary-color, #586571); }
.mlsys-original-player .mlsys-original-control-short { display: none; }
.mlsys-original-dialog .mlsys-original-controls { top: 3rem; }
@media (max-width: 540px) {
  .mlsys-original-player .mlsys-original-controls { gap: .25rem; }
  .mlsys-original-player .mlsys-original-controls button { min-width: 44px; min-height: 44px; padding: .3rem .45rem; }
  .mlsys-original-player .mlsys-original-control-full { display: none; }
  .mlsys-original-player .mlsys-original-control-short { display: inline; }
}

/* Keep full case framing available without displacing the inspected mechanism. */
.mlsys-original-player .mlsys-original-assumptions { margin: 0 0 .6rem; }
.mlsys-original-player .mlsys-original-assumptions-summary { min-height: 44px; padding: .55rem 0; cursor: pointer; font-size: .88em; line-height: 1.4; color: var(--bs-secondary-color, #586571); }
.mlsys-original-player .mlsys-original-assumptions .mlsys-original-scope { margin: .35rem 0 .75rem; }

/* Temporary reader preference; build-time timings remain the default. */
.mlsys-original-player .mlsys-original-speed { display: inline-flex; align-items: center; gap: .3rem; margin: 0; font-size: .85em; }
.mlsys-original-player .mlsys-original-speed select { width: auto; min-height: 2.5rem; padding: .25rem .35rem; }