/* CSS accompanying ../visualize.html

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

/* BEGIN - TEMPLATE CSS ISOLATION

   2026-01-18: Scoped to .pythontutor-app to prevent conflicts when
   visualize.html is wrapped in a surrounding header/footer template.

   Defensively sets CSS so that styles inside of visualizer app are not
   affected by whatever is in the surrounding template. Protects against:
   - box-sizing reset (content-box vs border-box)
   - typography (font-family, font-size, color)
   - link styling (color, text-decoration)
   - margin/padding resets on p, ul, ol
   - image display mode (inline vs block)

   2026-01-29: Added protection for ExecutionVisualizer (table cell padding,
   font, font-weight, font-smoothing, line-height) and buttons to match v6.
*/
.pythontutor-app {
  background-color: white;
  font-family: 'Funnel Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 11pt;
  color: black;
}

/* Link color matches --article-text-color from Fall 2025 redesigned CSS */
.pythontutor-app a,
.pythontutor-app a:visited {
  color: #3b4959;
  text-decoration: underline;
}

.pythontutor-app a:hover {
  color: #3b4959;
  text-decoration: underline;
  opacity: 0.85; /* matches --hover-opacity from Fall 2025 redesigned CSS */
}

.pythontutor-app span {
  padding: 0px;
}

/* Restore default box-sizing for Python Tutor elements.

   Modern CSS resets commonly use: *, *::before, *::after { box-sizing: border-box; }
   This was popularized by Paul Irish around 2012 and is now standard in virtually
   every CSS framework (Bootstrap, Tailwind, etc.) because border-box is more
   intuitive - width: 300px means the element is 300px total, not 300px plus
   padding and borders.

   However, Python Tutor's CSS predates this convention and assumes the browser
   default (content-box). This rule restores that default inside .pythontutor-app
   so existing layout calculations still work correctly.
*/
.pythontutor-app *,
.pythontutor-app *::before,
.pythontutor-app *::after {
  box-sizing: content-box;
}

/* Restore default paragraph margins to protect from surrounding template */
.pythontutor-app p {
  margin-top: 1em;
  margin-bottom: 1em;
}

/* Restore default list styling to protect from surrounding template */
.pythontutor-app ul,
.pythontutor-app ol {
  padding-left: 12px;
  margin-top: 1em;
  margin-bottom: 1em;
}

/* ExecutionVisualizer CSS isolation - restore browser defaults
   Added 2026-01-29 to match v6 visual appearance.

   styles.css global resets (e.g., * { margin: 0; padding: 0 }, body line-height,
   font-smoothing) affect elements inside the visualizer. The rules below restore
   browser defaults specifically for ExecutionVisualizer elements.
*/


/* Restore default table cell padding within visualizer (styles.css sets * { padding: 0 }) */
.pythontutor-app .ExecutionVisualizer td,
.pythontutor-app .ExecutionVisualizer th {
  padding: 1px;
}

/* Restore default image display (styles.css sets img { display: block; max-width: 100% }) */
.pythontutor-app img {
  display: inline;
  max-width: none;
}

/* Restore default button styling (styles.css sets button { font: inherit } which
   causes buttons to inherit line-height: 1.4 from body, making them taller) */
.pythontutor-app .ExecutionVisualizer button {
  font-family: inherit;
  font-size: inherit;
  line-height: normal;
}

/* Let ExecutionVisualizer use its native Verdana font from pytutor.css
   instead of inheriting Funnel Sans from .pythontutor-app above.
   This makes "Frames", "Objects", and other visualizer text match v6.
   Also reset font-weight, font-smoothing, and line-height which styles.css
   sets on html/body and make text appear lighter/taller than v6. */
.pythontutor-app .ExecutionVisualizer {
  font-family: verdana, arial, helvetica, sans-serif;
  font-weight: normal;
  line-height: normal;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}

/* Protect Tingle.js modal content from global CSS resets in surrounding
   stylesheets. Tingle modals appear outside .pythontutor-app, so they
   need their own protection from resets like * { margin: 0; padding: 0; }
*/
.tingle-modal a,
.tingle-modal a:visited,
.tingle-modal a:hover {
  color: #3D58A2;
  text-decoration: underline;
}

.tingle-modal span {
  padding: 0px;
}

.tingle-modal h1,
.tingle-modal h2,
.tingle-modal h3,
.tingle-modal h4,
.tingle-modal h5,
.tingle-modal h6 {
  margin-top: 1em;
  margin-bottom: 0.5em;
}

.tingle-modal p {
  margin-top: 1em;
  margin-bottom: 1em;
}

.tingle-modal div {
  margin-bottom: 1em;
}

.tingle-modal ul,
.tingle-modal ol {
  padding-left: 12px;
  margin-top: 1em;
  margin-bottom: 1em;
}

/* END - TEMPLATE CSS ISOLATION */


/* CENTER MAIN CONTENT
   Centers the main content areas horizontally on the page.
   Header and footer are handled by the template styles.
*/
.pythontutor-app {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

article#article {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* 2026-02-07: Outer app+ad layout refactored from <table> to flexbox.
   The HTML in visualize.html (and language pages) was changed from
   <table><tr><td>app</td><td>ad</td></tr></table> to
   <div class="app-layout"><div class="app-layout__main">app</div>
   <div class="app-layout__sidebar">ad</div></div>.
   This lets the sidebar hide and app fill full width on narrow viewports.
   See @media queries at the bottom of this file. */
.app-layout {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

/* flex-shrink:0 so a wide visualizer pushes the ad sidebar rightward
   (like the old <table> behavior). On mobile (<=749px) we switch to
   flex-shrink:1 once the ad is hidden -- see @media query below.
   IMPORTANT: do not allow shrinking while the ad is visible, or they overlap. */
.app-layout__main {
  flex: 1 0 auto;
}

.app-layout__sidebar {
  flex: 0 0 auto;
}

/* END - CENTER MAIN CONTENT */


/* hide this initially */
#codeIsRunning, #aboveTheFoldWarningMsg {
  display: none;
  color: #E10C65; /* keep in sync with --color-red in styles.css (not using CSS variables in this file) */
  font-size: 11pt;
  margin-bottom: 15px;
}

#codeIsRunning {
  font-weight: bold;
}

#optionsPane {
  /*
  margin-top: 15px;
  margin-bottom: 20px;
  */
  line-height: 125%;
  border: 1px solid #ccc;
  padding: 8px 14px;
  border-radius: 5px;
  display: inline-block;
}

#pyInputPane, #loadingPane {
  /*margin-top: 10px;*/
  margin-bottom: 15px;
  max-width: 750px;
}

#loadingPane {
  margin-bottom: 5px;
}

#codeInputPane {
  margin-top: 5px;
  font-size: 12pt;
  border: 1px solid #ddd;
}

#codeInputWarnings {
  margin-bottom: 8px;
}


button.smallBtn {
  font-size: 10.5pt;
  padding: 1px 4px;
}

/* Button styling to match Fall 2025 redesign (from Figma):
   - Font: 'Radio Canada Big', 16px, weight 600, line-height 100%
   - #e2f2f6 = --color-teal-medium
   - #d1eaf0 = --color-teal-dark
   - #bbe0e9 = --color-deep-teal
   - #2e4566 = --color-navy
*/
button.bigBtn {
  font-family: 'Radio Canada Big', sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 100%;
  margin-top: 0px;
  padding: 8px 16px;
  background: #e2f2f6; /* --color-teal-medium */
  color: #2e4566; /* navy */
  border: 1px solid #bbe0e9; /* --color-deep-teal */
  border-radius: 999px; /* pill shape */
  cursor: pointer;
}

button.bigBtn:hover {
  background: #d1eaf0; /* --color-teal-dark */
  border-color: #d1eaf0; /* match background on hover */
}

/* bottom ad below the visualizer */
#google_ad {
  /* original size and position */
  /*
  max-width: 500px;
  margin-top: 70px;
  margin-bottom: 10px;
  */

  /* settings up to 2022-10-05 */
  /* don't set a max-height since the ad may overlap with the text below if we do */
  /*
  max-width: 600px;
  margin-top: 70px;
  margin-bottom: 25px;
  */

  /* settings as of 2022-10-05 - i tried to set max-height to make the
     ads a bit shorter but it seems to get overridden by some other
     code, maybe AdSense code?!? so max-height doesn't seem to work.
     oh wells, i decreased margin-top so ad is closer to the content above it */
  max-width: 600px;
  margin-top: 25px; /* 2022-10-14: go from 50px -> 80px | 2024-09-01: go back to 50px | 2024-10-03: go to 25px; */
  margin-bottom: 15px;
}


#google_righthand_ad {
  /* wider spacing */
  /*margin-left: 150px;*/

  margin-left: 50px;

  /* i think we need to set explicit bounds since it's inside a td?!? */
  min-width: 200px;
  max-width: 300px;
  min-height: 400px;
  max-height: 600px;
}

#google_righthand_ad #adheader {
  text-align: center;
  margin-bottom: 30px;
  font-size: 10pt;
}

#header {
  font-size: 14pt;

  margin-top: 15px;
  margin-bottom: 25px;

  /* yoinked from index.css #learnHeader */
  color: #062270;
  font-family: 'Funnel Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-weight: bold;
}

/* Main content area margin for visualize.html */
main {
  margin-top: 25px;
  margin-bottom: 53px;
}


/* set overall alignment of all elements */
/* #header, <-- exclude header for now */
#pyOutputPane,
#pyInputPane,
#loadingPane,
#google_ad,
#footerAboveInlineDocs,
#aiTutorPane,
#footer {
  /* left align */
  margin-left: 32px;
  /* center align */
  /*
  margin-left: auto;
  margin-right: auto;
  */
}

#pyInlineDocs {
  font-size: 13pt;
  margin-top: 60px;
  margin-left: 20px;
  max-width: 700px;
  line-height: 1.5em;
}

#pyOutputPane {
  /* if a google_righthand_ad appears to the right of it, leave some
     room for it and make it not jiggle around horizontally as much */
  min-width: 900px;
  /* also leave some room above the google_ad below the code */
  /*min-height: 400px;*/
  margin-bottom: 25px;
}

#frontendErrorOutput {
  color: #E10C65; /* keep in sync with --color-red in styles.css (not using CSS variables in this file) */
  font-size: 12pt;
  margin-top: 10px;

  /* super-hacky -- set min-width to something huge so that long error messages
     don't word-wrap and look misaligned. instead this just overflows them: */
  min-width: 2000px;

  /* 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 */
  font-family: Courier, monospace;
}

#frontendErrorSubheading {
  font-family: 'Funnel Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 11pt;
  color: #666;
  margin-top: 8px;
  margin-bottom: 8px;
}

#surveyHeader {
  margin-left: 100px;
}

/* necessary for CodeMirror error line highlighting to work! */
.CodeMirror .errorLine { background: #ffff3f !important; }


#exampleSnippets {
 border-top: 1px solid #ccc;
 margin-top: 10px;
 margin-bottom: 35px;
 display: none; /* start off hidden */
}

#showExampleLink {
  margin-top: 15px;
}

#instructionsPane {
 margin-bottom: 10px;
}

#optHeader {
  font-family: Georgia, Palatino, Times, serif;
  font-size: 14pt;
  margin-bottom: 13px;
  margin-left: 16px;
  line-height: 1.4em;
}

#demoVis {
  margin-left: 16px;
  margin-top: 10px;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid gray;
}

#executeBtn {
  margin-right: 6px;
}

/* Saved inputs indicator shown below Visualize button in edit mode */
#savedInputsPane {
  display: none;
  font-size: 10pt;
  color: #E10C65; /* brightRed -- keep in sync with pytutor.ts and --color-red in styles.css */
  border: 1px solid #E10C65;
  border-radius: 3px;
  padding: 8px 12px;
  margin-top: 6px;
  margin-bottom: 8px;
  width: fit-content;
}

#savedInputsPane .savedInputsHeader {
  font-weight: bold;
  margin-bottom: 4px;
}

#savedInputsPane .savedInputRow {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
}

#savedInputsPane .savedInputIndex {
  flex-shrink: 0;
  margin-right: 4px;
}

#savedInputsPane .savedInputField {
  font-family: Andale mono, monospace;
  font-size: 10pt;
  padding: 2px 4px;
  border: 1px solid #ccc;
  width: 320px;
}

#savedInputsPane .savedInputDeleteBtn {
  margin-left: 4px;
  font-size: 10pt;
  cursor: pointer;
  padding: 0 4px;
  background: none;
  border: 1px solid #ccc;
  border-radius: 2px;
  color: #E10C65;
  line-height: 1.4;
}

#savedInputsPane .savedInputDeleteBtn:hover {
  background: #fdd;
}

#savedInputsPane .savedInputActions {
  margin-top: 8px;
}

#savedInputsPane .savedInputActions button {
  font-size: 10pt;
  cursor: pointer;
  margin-right: 6px;
  padding: 1px 6px;
}

/* Responsive: mobile (<=749px) -- hide ad sidebar, let app fill width, tighten margins */
@media (max-width: 749px) {
  .app-layout__sidebar {
    display: none;
  }
  /* Only allow main column to shrink once the ad is hidden */
  .app-layout__main {
    flex-shrink: 1;
    min-width: 0;
    max-width: 100%;
  }
  #pyOutputPane {
    min-width: 0;
  }
  #pyOutputPane,
  #pyInputPane,
  #loadingPane,
  #google_ad,
  #footerAboveInlineDocs,
  #aiTutorPane,
  #footer {
    max-width: 100%;
    margin-left: 16px;
    margin-right: 16px;
  }
  /* Override the inline width:700px set by JS on #codeInputPane */
  #codeInputPane {
    width: 100% !important;
  }
  main {
    margin-top: 10px;
  }
  /* Make permalink/embed inputs fit viewport instead of overflowing */
  #footerAboveInlineDocs input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    margin-top: 4px;
    display: block;
  }
}