/*

Online Python Tutor

Copyright (C) Philip J. Guo

Permission is hereby granted, free of charge, to any person obtaining a
copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be included
in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

*/

/* TODO: Eliminate duplication between this file and the Fall 2025 redesign
   (styles.css). Currently we manually copy-paste values, e.g., --color-red
   for error styling. Ideally we'd share CSS variables or use a build
   process to keep them in sync.
*/

/* Most recent color scheme redesign on 2012-08-19 */

/* To prevent CSS namespace clashes, prefix all rules with:
     div.ExecutionVisualizer
*/


/* reset some styles to nullify effects of existing stylesheets
   e.g., http://meyerweb.com/eric/tools/css/reset/
*/
div.ExecutionVisualizer {
  /* position:relative kept here for backward compatibility and in case any
     other absolutely-positioned children depend on it. The jsPlumb Container
     has been moved to #vizLayoutTdSecond (see below and DataVisualizer
     constructor in pytutor.ts). */
  /* [written by Claude Code on 2026-02-11, may be incorrect/outdated] */
  position: relative;
}

/* 2026-02-07: Refactored the visualizer layout from a <table> to flexbox
   <div>s so the two main panels (code+nav on the left, stack/heap on the
   right) can stack vertically on mobile viewports (<=749px). The HTML
   template in pytutor.ts was changed from <table>/<tr>/<td> to a flat
   <div class="visualizer"> with two child <div>s (#vizLayoutTdFirst and
   #vizLayoutTdSecond -- IDs kept for backward compatibility). The
   verticalStack param now toggles a .vizVerticalStack CSS class instead
   of emitting different HTML. jQuery UI .resizable() on #codAndNav and
   jsPlumb connectors inside #vizLayoutTdSecond are unaffected since they
   operate on child elements, not the outer container.
   See the @media (max-width: 749px) query at the end of this file. */
div.ExecutionVisualizer div.visualizer {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  font-family: verdana, arial, helvetica, sans-serif;
  font-size: 10pt;
  margin-bottom: 10px;
}

/* verticalStack param: always stack vertically */
div.ExecutionVisualizer div.visualizer.vizVerticalStack {
  flex-direction: column;
  flex-wrap: nowrap;
}

/* Horizontal separator when verticalStack is active (mirrors mobile stacking style) */
div.ExecutionVisualizer div.visualizer.vizVerticalStack > #vizLayoutTdFirst {
  margin-bottom: 15px;
}
div.ExecutionVisualizer div.visualizer.vizVerticalStack > #vizLayoutTdSecond {
  border-top: 1px solid #dddddd;
  padding-top: 5px;
  margin-top: 0px;
}

/* First pane keeps its set width (500px default from inline style on #codAndNav) */
div.ExecutionVisualizer div.visualizer > #vizLayoutTdFirst {
  flex: 0 0 auto;
}

/* Second pane: data visualization panel.
   position:relative makes this the offsetParent for jsPlumb's absolutely-
   positioned connector/endpoint/overlay SVG elements (the jsPlumb Container
   is set to this element in DataVisualizer constructor in pytutor.ts).
   Connectors remain OUTSIDE #vizZoomWrapper (the transform:scale() child),
   so their positions are not double-scaled. */
/* [written by Claude Code on 2026-02-14, may be incorrect/outdated] */
div.ExecutionVisualizer div.visualizer > #vizLayoutTdSecond {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
}

#vizZoomWrapper {
  transform-origin: top left;
}

div.ExecutionVisualizer td#stack_td,
div.ExecutionVisualizer td#heap_td {
  vertical-align:top;
  font-size: 10pt; /* don't make fonts in the heap so big! */
}

div.ExecutionVisualizer #dataViz {
  /*margin-left: 25px;*/
}

div.ExecutionVisualizer #selectiveHideStatus {
  font-size: 9pt;
  margin-top: 20px;
  margin-left: 13px;
}

div.ExecutionVisualizer #cppDetailPane {
  font-size: 10pt;
  margin-top: 15px;
  margin-left: 13px; /* match what #selectiveHideStatus uses */
}

/*
div.ExecutionVisualizer div#codeDisplayDiv {
  width: 550px;
}
*/

div.ExecutionVisualizer div#pyCodeOutputDiv {
  /*max-width: 550px;*/
  /* CSS fallback; overridden by JS via ExecutionVisualizer.DEFAULT_CODE_DIV_HEIGHT */
  max-height: 460px;
  /*max-height: 620px;*/
  overflow: auto;
  margin-bottom: 4px;

  margin-left: auto;
  margin-right: auto;
}

div.ExecutionVisualizer table#pyCodeOutput {
  font-family: Andale mono, monospace;
  /* IMPORTANT: changing font-size or line-height affects the per-line pixel height.
     If changed, update CODE_LINE_HEIGHT_PX in pytutor.ts to match (~23px currently). */
  /*font-size:12pt;*/
  font-size:11pt;
  line-height:1.1em;

  border-collapse: separate; /* some crazy CSS voodoo that needs to be
                                there so that SVG arrows to the left
                                of the code line up vertically in Chrome */
  border-spacing: 0px;
  border-top: 1px solid #bbb;
  padding-top: 3px;
  /*margin-top: 6px;*/
  margin: 3px auto; /* Center code in its pane */
}

/* don't wrap lines within code output ... FORCE scrollbars to appear */
div.ExecutionVisualizer table#pyCodeOutput td {
  white-space: nowrap;
  vertical-align: middle; /* explicitly force, to override external CSS conflicts */
}

div.ExecutionVisualizer #leftCodeGutterSVG {
  width: 18px;
  min-width: 18px; /* make sure it doesn't squash too thin */
  height: 0px; /* programmatically set this later ... IE needs this to
                  be 0 or it defaults to something arbitrary and gross */
}

div.ExecutionVisualizer #prevLegendArrowSVG,
div.ExecutionVisualizer #curLegendArrowSVG {
  width: 18px;
  height: 10px;
}

div.ExecutionVisualizer .arrow {
  font-size: 16pt;
}

div.ExecutionVisualizer table#pyCodeOutput .lineNo {
  color: #aaa;
  padding: 0.2em;
  padding-left: 0.3em;
  padding-right: 0.5em;
  text-align: right;
}

div.ExecutionVisualizer table#pyCodeOutput .cod {
  /*font-weight: bold;*/
  margin-left: 3px;
  padding-left: 7px;
  text-align: left; /* necessary or else doesn't work properly in IE */
}

div.ExecutionVisualizer div#progOutputs {
  margin-left: 13px; /* line up with heap visualizations */
  margin-bottom: 3px;
}

div.ExecutionVisualizer div#legendDiv {
  padding: 0px;
  text-align: left;
  color: #333;
  font-size: 8pt;
  line-height: 1.5;
}

div.ExecutionVisualizer div#editCodeLinkDiv {
  text-align: center;
  margin-top: 7px;
  margin-bottom: 7px;
  font-size: 10pt;
}

div.ExecutionVisualizer div#annotateLinkDiv {
  /*text-align: left;*/
  margin-top: 0px;
  margin-bottom: 12px;
  /*
  margin-left: auto;
  margin-right: auto;
  */
}

div.ExecutionVisualizer div#stepAnnotationDiv {
  margin-bottom: 12px;
}

div.ExecutionVisualizer textarea#stepAnnotationEditor,
div.ExecutionVisualizer textarea#vizTitleEditor,
div.ExecutionVisualizer textarea#vizDescriptionEditor {
  border: 1px solid #999999;
  padding: 4px;

  overflow: auto; /* to look pretty on IE */
  /* make sure textarea doesn't grow and stretch */
  resize: none;
}


div.ExecutionVisualizer #errorOutput {
  color: #E10C65; /* keep in sync with --color-red in styles.css (not using CSS variables in this file) */
  font-size: 12pt;
  margin-top: 10px;
  margin-bottom: 10px;
  /* VERY IMPORTANT to use a monospace font or else characters in
     multi-line error messages (e.g., in Python) won't align properly
     and users may get confused. get inspired by #frontendErrorOutput in opt-frontend.css */
  font-family: Courier, monospace;

  min-width: 2000px; /* purposely make this wider so that warnings hopefully don't line-wrap */
}

div.ExecutionVisualizer #errorOutputFooter {
  font-family: verdana, arial, helvetica, sans-serif;
  font-size: 9pt;
  color: #333;
  margin-top: 6px;
  margin-bottom: 8px;
}

/* display compiler warnings like from gcc/g++ for C/C++ */
div.ExecutionVisualizer #warningsOutput {
  font-family: Andale mono, monospace; /* need a monospace font so that different lines of warning messages can align properly */
  color: #333;
  font-size: 7.5pt; /* make it tiny */
  padding-top: 12px;
  padding-bottom: 6px;

  min-width: 2000px; /* purposely make this wider so that warnings hopefully don't line-wrap */
}

/* VCR control buttons for stepping through execution */

div.ExecutionVisualizer #vcrControls {
  margin-top: 15px;
  margin-bottom: 6px;
  /*width: 100%;*/
  text-align: center;
}

div.ExecutionVisualizer #vcrControls button {
  margin-left: 2px;
  margin-right: 2px;
  padding: 2px 4px; /* Explicit padding to work with or without global CSS reset */
}

div.ExecutionVisualizer #curInstr {
  text-align: center;
}

div.ExecutionVisualizer #pyStdout {
  border: 1px solid #999999;
  font-size: 10pt;
  padding: 3px;
  font-family: Andale mono, monospace;

  overflow: auto; /* to look pretty on IE */
  /* make sure textarea doesn't grow and stretch */
  resize: none;
}


div.ExecutionVisualizer .vizFrame {
  margin-bottom: 20px;
  padding-left: 8px;
  border-left: 2px solid #cccccc;
}


/* Rendering of primitive types */

div.ExecutionVisualizer .importedObj {
  font-size: 8pt;
}

div.ExecutionVisualizer .nullObj {
/*  font-size: 8pt; */
}

div.ExecutionVisualizer .stringObj,
div.ExecutionVisualizer .customObj,
div.ExecutionVisualizer .funcObj {
  font-family: Andale mono, monospace;
  white-space: nowrap;
}

div.ExecutionVisualizer .funcCode {
  font-size: 8pt;
}

div.ExecutionVisualizer .retval {
  font-size: 9pt;
}

div.ExecutionVisualizer .stackFrame .retval {
  color: #E10C65; /* highlight non-zombie stack frame return values -
                     keep in sync with --color-red in styles.css (not using CSS variables in this file) */
}

/* Rendering of basic compound types */

div.ExecutionVisualizer table.listTbl,
div.ExecutionVisualizer table.tupleTbl,
div.ExecutionVisualizer table.setTbl {
  background-color: #ffffc6;
}


div.ExecutionVisualizer table.listTbl {
  border: 0px solid black;
  border-spacing: 0px;
}

div.ExecutionVisualizer table.listTbl td.listHeader,
div.ExecutionVisualizer table.tupleTbl td.tupleHeader {
  padding-left: 4px;
  padding-top: 2px;
  padding-bottom: 3px;
  font-size: 8pt;
  color: #777;
  text-align: left;
  border-left: 1px solid #555555;
}

div.ExecutionVisualizer table.tupleTbl {
  border-spacing: 0px;
  color: black;

  border-bottom: 1px solid #555555; /* must match td.tupleHeader border */
  border-top: 1px solid #555555; /* must match td.tupleHeader border */
  border-right: 1px solid #555555; /* must match td.tupleHeader border */
}


div.ExecutionVisualizer table.listTbl td.listElt {
  border-bottom: 1px solid #555555; /* must match td.listHeader border */
  border-left: 1px solid #555555; /* must match td.listHeader border */
}

div.ExecutionVisualizer table.listTbl td.listMatrixHeader {
  padding-left: 4px;
  padding-right: 4px;
  padding-top: 1px;
  padding-bottom: 3px;
  font-size: 7pt;
  color: #777;
  text-align: left;
  border-left: 1px solid #555555;
  border-bottom: 0px solid black;
}

div.ExecutionVisualizer table.listTbl td.listMatrixElt {
  border-left: 1px solid #555555;
  border-bottom: 1px solid #555555;
  color: black;
  padding-top: 5px;
  padding-bottom: 9px;
  padding-left: 9px;
  padding-right: 9px;
  text-align: center;
  vertical-align: top;
}

div.ExecutionVisualizer table.listTbl td.listMatrixEmpty {
  background-color: #eee;
}


/* for C and C++ visualizations */

/* make this slightly more compact than listTbl since arrays can be
   rendered on the stack so we want to kinda conserve space */
div.ExecutionVisualizer table.cArrayTbl {
  background-color: #ffffc6;
  padding-left: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
  /*font-size: 8pt;*/

  color: #777;
  text-align: left;
  border: 0px solid black;
  border-spacing: 0px;
}

div.ExecutionVisualizer table.cArrayTbl td.cArrayHeader {
  padding-left: 5px;
  padding-top: 0px;
  padding-bottom: 2px;
  font-size: 6pt;
  color: #777;
  text-align: left;
  border-bottom: 0px solid black; /* override whatever we're nested in */
}

div.ExecutionVisualizer table.cArrayTbl td.cArrayElt {
  border-bottom: 1px solid #888;
  border-left: 1px solid #888;
  border-top: 0px solid black;
  color: black;

  padding-top: 2px;
  padding-bottom: 4px;
  padding-left: 5px;
  padding-right: 4px;
  vertical-align: top; /* this was previously bottom but 'top' might look better when cppShowBinary is on */

  /* 2022-10-13 - add "position: relative;" here since we want to put spans INSIDE
     of it with "position: absolute" in order to position them absolutely *within*
     a .cArrayElt element, which is itself positioned relatively ... */
  position: relative;
}

/* 2022-10-13 - added to give jsPlumb arrows a place to anchor just to the left
   and right of C_ARRAY objects so that out-of-bounds pointers can anchor here
   to show that they are barely out-of-bounds */
div.ExecutionVisualizer table.cArrayTbl td.cArrayElt .cArrayOutOfBoundsAnchor {
  font-size: 13pt;

  position: absolute; /* we want to set absolute position inside of a relative positioned parent element .cArrayElt */
  top: 10px; /* a default 'top', but we can set it dynamically in JavaScript for finer control */
  /* set 'left' property dynamically in JavaScript */
}

div.ExecutionVisualizer table.cArrayTbl td.cMultidimArrayHeader {
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 1px;
  padding-bottom: 3px;
  font-size: 6pt;
  color: #777;
  text-align: left;
  border-top: 1px solid #888;
  border-left: 1px solid #888;
  border-bottom: 0px solid black; /* override whatever we're nested in */
}

div.ExecutionVisualizer table.cArrayTbl td.cMultidimArrayElt {
  border-left: 1px solid #888;
  color: black;
  padding-top: 1px;
  padding-bottom: 4px;
  padding-left: 5px;
  padding-right: 5px;
  vertical-align: top; /* this was previously bottom but 'top' might look better when cppShowBinary is on */
}


/* for rendering C_DATA */
div.ExecutionVisualizer .cdataHeader {
  margin-bottom: 5px;
}

div.ExecutionVisualizer .cdataElt {
  font-size: 10pt;

  /* 2022-10-13 - add "position: relative;" here since we want to put spans INSIDE
     of it with "position: absolute" in order to position them absolutely *within*
     a .cdataElt element, which is itself positioned relatively ... */
  position: relative;
}

/* for rendering C_STRUCT, C_UNION, C_ARRAY, and C_MULTIDIMENSIONAL_ARRAY */
div.ExecutionVisualizer .cStructUnion,
div.ExecutionVisualizer .cArray {
  position: relative;

  /* give them some padding since may be embedded within stack frames or arrays, so we don't want them to feel too cramped */
  /* 2023-09-24 - actually comment this out since the padding will already come
     from enclosing elements, so no need to add even more here */
  /*
  padding-left: 3px;
  padding-bottom: 3px;
  */
}

/* for handling 'within_obj' jsPlumb arrow anchors in pytutor.js */
div.ExecutionVisualizer .withinObjAnchor {
  font-size: 11pt; /* make emojis that we put in here a bit smaller */

  position: absolute; /* should be positioned absolutely within a .cdataElt or .cStructUnion, which has position: relative */
  top: 10px; /* a default 'top', but we can set it dynamically in JavaScript for finer control */
  /* set 'left' property dynamically in JavaScript */
}

div.ExecutionVisualizer .cdataUninit {
  color: #888;
}

div.ExecutionVisualizer .paddingField {
  font-size: 0.7em;
  font-style: italic;
}

div.ExecutionVisualizer .cdataHexRep {
  color: #555;
  font-size: 9pt;
  font-family: 'Courier New', Courier, monospace;
  margin-top: 5px;
}

div.ExecutionVisualizer .cdataBinaryRep {
  color: #555;
  margin-top: 3px;
  font-size: 9pt;
  /* important to use fixed-width font so everything aligns well */
  font-family: 'Courier New', Courier, monospace;
}

div.ExecutionVisualizer .memAddrSmall {
  color: #333;
  font-size: 9pt; /* was 7pt but some found this too small */
  font-family: 'Courier New', Courier, monospace;
}


div.ExecutionVisualizer table.tupleTbl td.tupleElt {
  border-left: 1px solid #555555; /* must match td.tupleHeader border */
}

/* this used to be customObjTbl and customObjElt but i consolidated it into a div */
div.ExecutionVisualizer div.customObj {
  background-color: white;
  color: black;
  border: 1px solid black;
  padding: 5px;
  font-size: 9pt; /* make this smaller */
}

div.ExecutionVisualizer table.listTbl td.listElt,
div.ExecutionVisualizer table.tupleTbl td.tupleElt {
  padding-top: 0px;
  padding-bottom: 8px;
  padding-left: 10px;
  padding-right: 10px;
  vertical-align: bottom;
}

div.ExecutionVisualizer table.setTbl {
  border: 1px solid #555555;
  border-spacing: 0px;
  text-align: center;
}

div.ExecutionVisualizer table.setTbl td.setElt {
  padding: 8px;
}


div.ExecutionVisualizer table.dictTbl,
div.ExecutionVisualizer table.instTbl,
div.ExecutionVisualizer table.classTbl {
  border-spacing: 1px;
}

div.ExecutionVisualizer table.dictTbl td.dictKey,
div.ExecutionVisualizer table.instTbl td.instKey,
div.ExecutionVisualizer table.classTbl td.classKey {
  background-color: #faebbf;
}

div.ExecutionVisualizer table.dictTbl td.dictVal,
div.ExecutionVisualizer table.instTbl td.instVal,
div.ExecutionVisualizer table.classTbl td.classVal,
div.ExecutionVisualizer td.funcCodTd {
  background-color: #ffffc6;
}


div.ExecutionVisualizer table.dictTbl td.dictKey,
div.ExecutionVisualizer table.instTbl td.instKey,
div.ExecutionVisualizer table.classTbl td.classKey {
  padding-top: 6px /*15px*/;
  padding-bottom: 6px;
  padding-left: 10px;
  padding-right: 4px;

  text-align: right;
}

div.ExecutionVisualizer table.dictTbl td.dictVal,
div.ExecutionVisualizer table.instTbl td.instVal,
div.ExecutionVisualizer table.classTbl td.classVal {
  padding-top: 6px; /*15px*/;
  padding-bottom: 6px;
  padding-right: 10px;
  padding-left: 4px;
}

div.ExecutionVisualizer td.funcCodTd {
  padding-left: 4px;
  padding-right: 4px;
}

/* don't just match generic 'td' inside of here ... name the exact classes,
   or else you might risk polluting inner td's such as those for multidimensional array elements */
div.ExecutionVisualizer table.classTbl td.classKey,
div.ExecutionVisualizer table.classTbl td.classVal,
div.ExecutionVisualizer table.instTbl td.instKey,
div.ExecutionVisualizer table.instTbl td.instVal,
div.ExecutionVisualizer td.funcCodTd {
  border-bottom: 1px #888 solid;
}

div.ExecutionVisualizer table.classTbl td.classVal,
div.ExecutionVisualizer table.instTbl td.instVal {
  border-left: 1px #888 solid;
}

div.ExecutionVisualizer table.classTbl,
div.ExecutionVisualizer table.funcTbl {
  border-collapse: collapse;
  border: 1px #888 solid;
}

/* only add a border to dicts if they're embedded within another object */
div.ExecutionVisualizer td.listElt table.dictTbl,
div.ExecutionVisualizer td.tupleElt table.dictTbl,
div.ExecutionVisualizer td.dictVal table.dictTbl,
div.ExecutionVisualizer td.instVal table.dictTbl,
div.ExecutionVisualizer td.classVal table.dictTbl {
  border: 1px #888 solid;
}

div.ExecutionVisualizer .objectIdLabel {
  font-size: 8pt;
  color: #444;
  margin-bottom: 2px;
}

div.ExecutionVisualizer .typeLabel {
  font-size: 8pt;
  color: #555;
  margin-bottom: 3px;
}

div.ExecutionVisualizer div#stack,
div.ExecutionVisualizer div#globals_area {
  padding-left: 10px;
  padding-right: 30px;

  /* no longer necessary ... */
  /*float: left;*/
  /* border-right: 1px dashed #bbbbbb; */
}

div.ExecutionVisualizer div.stackFrame,
div.ExecutionVisualizer div.zombieStackFrame {
  /*background-color: #ffffff;*/ /* don't set a background color to let it blend into background of enclosing page (in case it's non-white) */
  margin-bottom: 15px;
  padding: 2px;
  padding-left: 6px;
  padding-right: 6px;
  padding-bottom: 4px;
  font-size: 10pt;
}

div.ExecutionVisualizer div.zombieStackFrame {
  border-left: 1px dotted #aaa;
  /*color: #c0c0c0;*/
  color: #a0a0a0;
}

div.ExecutionVisualizer div.highlightedStackFrame {
  background-color: #e2ebf6;
  /*background-color: #d7e7fb;*/

  /*background-color: #c0daf8;*/
  /*background-color: #9eeaff #c5dfea;*/
}

div.ExecutionVisualizer div.stackFrame,
div.ExecutionVisualizer div.highlightedStackFrame {
  border-left: 1px solid #a6b3b6;
}


div.ExecutionVisualizer div.stackFrameHeader {
  font-family: Andale mono, monospace;
  font-size: 10pt;
  margin-top: 4px;
  margin-bottom: 3px;
  white-space: nowrap;
}

div.ExecutionVisualizer td.stackFrameVar {
  text-align: right;
  padding-right: 8px;
  padding-top: 3px;
  padding-bottom: 3px;
}

div.ExecutionVisualizer td.stackFrameValue {
  text-align: left;
  border-bottom: 1px solid #aaaaaa;
  border-left: 1px solid #aaaaaa;

  vertical-align: middle;

  padding-top: 4px;
  padding-left: 4px;
  padding-bottom: 4px;
}

div.ExecutionVisualizer .stackFrameVarTable tr {

}

div.ExecutionVisualizer .stackFrameVarTable {
  text-align: right;
  padding-top: 3px;

  /* right-align the table */
  margin-left: auto;
  margin-right: 0px;

  /* hack to counteract possible nasty CSS reset styles from parent divs */
  border-collapse: separate;
  border-spacing: 2px;
}

div.ExecutionVisualizer div#heap {
  float: left;
  /* add some left padding or else if it's too close to the stack then
     arrows won't 'curve' nicely, instead they'll be drawn straight,
     which doesn't look as pleasing */
  padding-left: 34px;
}

div.ExecutionVisualizer .readonlyMemoryFooter {
  color: #E10C65; /* keep in sync with --color-red in styles.css (not using CSS variables in this file) */
  font-size: 8pt;
  margin-top: 2px;
}

div.ExecutionVisualizer .typePunningFooter {
  font-size: 8pt;
  margin-top: 2px;
}

div.ExecutionVisualizer td.toplevelHeapObject {
  /* needed for d3 to do transitions */
  /*padding-left: 8px;*/ /* commented-out on 2023-09-24 to save horizontal space */
  padding-right: 8px;
  padding-top: 4px;
  padding-bottom: 4px;
  /*
  border: 2px dotted white;
  border-color: white;
  */
}

div.ExecutionVisualizer table.heapRow {
  margin-bottom: 10px;
}

div.ExecutionVisualizer div.heapObject {
  padding-left: 2px; /* leave a TINY amount of room for connector endpoints */
}

div.ExecutionVisualizer div.heapPrimitive {
  padding-left: 4px; /* leave some more room for connector endpoints */
}

div.ExecutionVisualizer div#stackHeader {
  margin-bottom: 15px;
  text-align: right;
}

div.ExecutionVisualizer div#heapHeader {
  /*margin-top: 2px;
  margin-bottom: 13px;*/
  margin-left: 4px; /* to left-align it better with heap objects */
  margin-bottom: 15px;
}

div.ExecutionVisualizer div#stackHeader,
div.ExecutionVisualizer div#heapHeader {
  color: #333333;
  font-size: 10pt;
}

div.ExecutionVisualizer div#langDisplayDiv {
  text-align: center;
  margin-top: 2pt;
  margin-bottom: 3pt;
  font-size: 9pt;
}

div.ExecutionVisualizer #executionSlider {
  /* if you set 'width', then it looks ugly when you dynamically resize */
  margin-top: 15px;
  margin-bottom: 5px;

  /* DON'T center this, since we need breakpoints in executionSliderFooter to be well aligned */
  width: 98%;
}

div.ExecutionVisualizer #executionSliderCaption {
  font-size: 8pt;
  color: #333;
  margin-top: 15px;
}

div.ExecutionVisualizer #executionSliderFooter {
  margin-top: -7px; /* make it butt up against #executionSlider */
}

div.ExecutionVisualizer #codeFooterDocs,
div.ExecutionVisualizer #printOutputDocs {
  margin-bottom: 3px;
  font-size: 8pt;
  color: #333;
}

div.ExecutionVisualizer #codeFooterDocs {
  margin-top: 5px;
  margin-bottom: 12px;
  width: 95%;
}

/* darken slider handle a bit */
div.ExecutionVisualizer .ui-slider .ui-slider-handle {
  border: 1px solid #999;
}


/* for annotation bubbles */

/* For styling tricks, see: http://css-tricks.com/textarea-tricks/ */
textarea.bubbleInputText {
  border: 1px solid #ccc;
  outline: none;
  overflow: auto; /* to look pretty on IE */

  /* make sure textarea doesn't grow and stretch the enclosing bubble */
  resize: none;
  width: 225px;
  max-width: 225px;
  height: 35px;
  max-height: 35px;
}

div.ExecutionVisualizer .annotationText,
div.ExecutionVisualizer .vizDescriptionText {
  font-family: verdana, arial, helvetica, sans-serif;
  font-size: 11pt;
  line-height: 1.5em;
}

div.ExecutionVisualizer .vizTitleText {
  font-family: verdana, arial, helvetica, sans-serif;
  font-size: 16pt;
  margin-bottom: 12pt;
}

div.ExecutionVisualizer div#vizHeader {
  margin-bottom: 10px;
  width: 700px;
  max-width: 700px;
}

/* prev then curr, so curr gets precedence when both apply */
div.ExecutionVisualizer .highlight-prev {
  background-color: #F0F0EA;
}

div.ExecutionVisualizer .highlight-cur {
  background-color: #FFFF66;
}

div.ExecutionVisualizer .highlight-legend {
  padding: 2px;
}

/* resizing sliders from David Pritchard */
.ui-resizable-e {
  background-color: #dddddd;
  width: 1px;
  border: 3px solid white;
}

.ui-resizable-e:hover {
  border-color: #dddddd;
}

/* south (bottom) resize handle for code display height */
div.ExecutionVisualizer #pyCodeOutputDivWrapper > .ui-resizable-s {
  background-color: #dddddd;
  height: 1px;
  border: 3px solid white;
  cursor: s-resize;
}

div.ExecutionVisualizer #pyCodeOutputDivWrapper > .ui-resizable-s:hover {
  border-color: #dddddd;
}

div.ExecutionVisualizer a,
div.ExecutionVisualizer a:visited,
div.ExecutionVisualizer a:hover {
  color: #3D58A2;
}

/* Read-only display of saved user inputs shown during visualization */
div.ExecutionVisualizer #savedInputsDisplayPane {
  font-size: 10pt;
  color: #E10C65;
  border: 1px solid #E10C65;
  border-radius: 3px;
  padding: 8px 12px;
  margin: 20px auto 8px auto;
  width: fit-content;
}

div.ExecutionVisualizer #savedInputsDisplayPane .savedInputsDisplayHeader {
  font-weight: bold;
  margin-bottom: 4px;
}

div.ExecutionVisualizer #savedInputsDisplayPane .savedInputsDisplayRow {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}

div.ExecutionVisualizer #savedInputsDisplayPane .savedInputsDisplayIndex {
  flex-shrink: 0;
  margin-right: 4px;
}

div.ExecutionVisualizer #savedInputsDisplayPane .savedInputsDisplayValue {
  font-family: Andale mono, monospace;
  font-size: 10pt;
  color: black;
}

div.ExecutionVisualizer #savedInputsDisplayPane .savedInputsDisplayNote {
  margin-top: 6px;
  font-size: 9pt;
  font-style: italic;
  color: #888;
}

/* Stdin consumption display for Java (shown above print output) */
div.ExecutionVisualizer #stdinWrap {
  font-size: 10pt;
  color: #333;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 5px 8px;
  margin-left: 13px; /* align with #progOutputs */
  margin-bottom: 20px;
  min-width: 185px;
  width: fit-content;
}

div.ExecutionVisualizer .stdinHeader {
  margin-left: 13px; /* align with #stdinWrap */
  margin-bottom: 3px;
  font-size: 8pt;
  color: #333;
}

div.ExecutionVisualizer #stdinWrap #stdinShow {
  font-family: Andale mono, monospace;
  font-size: 10pt;
  color: black;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  white-space: pre-wrap;
  word-wrap: break-word;
}

div.ExecutionVisualizer div#rawUserInputDiv {
  font-family: Andale mono, monospace;
  line-height: 1.4em;
  padding: 8px;
  width: 90%;
  margin: 5px auto;
  border: 1px #E10C65 solid; /* keep in sync with --color-red in styles.css */
}

div.ExecutionVisualizer #raw_input_textbox {
  font-family: Andale mono, monospace;
  font-size: 10pt;
  padding: 2px 4px;
  max-width: 100%;
  box-sizing: border-box;
}

div.ExecutionVisualizer #raw_input_submit_btn {
  font-family: verdana, arial, helvetica, sans-serif;
  padding: 2px 8px;
}

/* for pyCrazyMode */

/* prev then curr, so curr gets precedence when both apply */
div.ExecutionVisualizer .pycrazy-highlight-prev {
  background-color: #eeeeee; /*#F0F0EA;*/
  /*
  text-decoration: none;
  border-bottom: 1px solid #dddddd;
  */
}

div.ExecutionVisualizer .pycrazy-highlight-cur {
  background-color: #FFFF66;
  /* aligned slightly higher than border-bottom */
  /*
  text-decoration: none;
  border-bottom: 1px solid #E10C65; (keep in sync with --color-red in styles.css)
  */
}

div.ExecutionVisualizer .pycrazy-highlight-prev-and-cur {
  background-color: #FFFF66;

  text-decoration: none;
  border-bottom: 1px solid #999999;
}


#optTabularView thead.stepTableThead {
  background-color: #bbb;
}

#optTabularView tbody.stepTableTbody {
}

#optTabularView td.stepTableTd {
  padding: 3px 10px;
}

#uiControlsPane {
  font-size: 10pt;
  margin-top: 10px;
}

#creditsPane {
  font-size: 9pt;
  margin-top: 30px;
}


/* BEGIN Java frontend by David Pritchard and Will Gwozdz */

/* stack and queue css by Will Gwozdz */
div.ExecutionVisualizer table.queueTbl,
div.ExecutionVisualizer table.stackTbl {
  background-color: #ffffc6;
}

div.ExecutionVisualizer table.queueTbl,
div.ExecutionVisualizer table.stackTbl {
  border: 0px solid black;
  border-spacing: 0px;
}

div.ExecutionVisualizer table.stackTbl td.stackElt,
div.ExecutionVisualizer table.queueTbl td.queueElt {
  padding-left: 8px;
  padding-right: 8px;
  padding-top: 2px;
  padding-bottom: 3px;
  border-top: 1px solid #555555;
  border-bottom: 1px solid #555555;
  border-left: 1px dashed #555555;
}

div.ExecutionVisualizer table.stackTbl td.stackFElt,
div.ExecutionVisualizer table.queueTbl td.queueFElt {
  background-color: white;
  border-top: 1px solid #555555;
  border-bottom: 1px solid #555555;
}

div.ExecutionVisualizer table.stackTbl td.stackLElt {
  background-color: white;
  border-left: 1px solid #555555;
}

div.ExecutionVisualizer table.queueTbl td.queueLElt {
  background-color: white;
  border-top: 1px solid#555555;
  border-bottom: 1px solid #555555;
  border-left: 1px dashed #555555;
}

/* This ensures a border is drawn around a dict
   if its nested in another object. */
div.ExecutionVisualizer td.stackElt table.dictTbl,
div.ExecutionVisualizer td.stackLElt table.dictTbl,
div.ExecutionVisualizer td.stackFElt table.dictTbl,
div.ExecutionVisualizer td.queueElt table.dictTbl,
div.ExecutionVisualizer td.queueLElt table.dictTbl,
div.ExecutionVisualizer td.queueFElt table.dictTbl {
  border: 1px #888 solid;
}

.symbolic {
  font-size: 18pt;
}

/* "boxed" wrapper primitives (Integer, Boolean, etc.) */
div.ExecutionVisualizer .wrappedPrimitive {
  display: inline-block;
  border: 1px solid #aaa;
  padding: 2px 4px;
  text-align: center;
}

div.ExecutionVisualizer .wrappedPrimitive .wrappedPrimitiveVal {
  padding-top: 1px;
}

/* END Java frontend by David Pritchard and Will Gwozdz */

/* Responsive: stack panels vertically on mobile viewports
   (matches the site-wide mobile breakpoint in styles.css) */
@media (max-width: 749px) {
  div.ExecutionVisualizer div.visualizer {
    flex-direction: column;
  }
  div.ExecutionVisualizer div.visualizer > #vizLayoutTdFirst,
  div.ExecutionVisualizer div.visualizer > #vizLayoutTdSecond {
    flex: 1 1 100%;
    width: 100%;
  }
  /* Let code panel fill available width instead of fixed 500px */
  div.ExecutionVisualizer div.visualizer > #vizLayoutTdFirst #codAndNav {
    width: 100% !important;
  }
  /* Hide all resize handles when stacked (no side-by-side to resize).
     !important needed to override inline style="display:block" set by jQuery UI */
  div.ExecutionVisualizer div.visualizer > #vizLayoutTdFirst .ui-resizable-handle {
    display: none !important;
  }
  /* Reduce code display to ~10 lines on mobile.
     !important overrides inline max-height set by JS. */
  div.ExecutionVisualizer div#pyCodeOutputDiv {
    max-height: 230px !important;
  }
  div.ExecutionVisualizer table#pyCodeOutput {
    border-bottom: 1px solid #bbb;
  }
  div.ExecutionVisualizer #uiControlsPane {
    display: none;
  }
  /* Horizontal separator between stacked panels (emulates the vertical
     .ui-resizable-e handle shown on tablet/desktop) */
  div.ExecutionVisualizer div.visualizer > #vizLayoutTdSecond {
    border-top: 1px solid #dddddd;
    padding-top: 5px;
    margin-top: 0px;
  }
  #creditsPane {
    margin-top: 15px;
  }
}