/*
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}
*/
:root {
  --color-00000040 : #00000040;
  --color-superscript-widget : #fff;
  --color-339 : #339;

  --color-007acc : #007acc;
  --color-111 : #111;
  --color-1110 : #1110;
  --color-121212 : #121212;
  --color-155724 : #155724;
  --color-1a6 : #1a6;
  --color-1c1 : #1c1;
  --color-1e1e1e : #1e1e1e;
  --color-1e90ff : #1e90ff;
  --color-212121 : #212121;
  --color-222 : #222;
  --color-228822 : #228822;
  --color-231 : #231;
  --color-282828 : #282828;
  --color-2c2f2f : #2c2f2f;
  --color-2fa32f : #2fa32f;
  --color-333 : #333;
  --color-358039 : #358039;
  --color-3a3a3a : #3a3a3a;
  --color-444 : #444;
  --color-11d120 : #11d120;
  --color-45a049 : #45a049;
  --color-45f049 : #45f049;
  --color-555 : #555;
  --color-764 : #764;
  --color-909090 : #909090;
  --color-a82 : #a82;
  --color-b0b0b0 : #b0b0b0;
  --color-c4ddca : #c4ddca;
  --color-c9f : #c9f;
  --color-ccc : #ccc;
  --color-d4edda : #d4edda;
  --color-ddc : #ddc;
  --color-e88 : #e88;
  --color-f0f0f0 : #f0f0f0;
  --color-f88 : #f88;
  --color-fd2 : #fd2;
  --color-fdd : #fdd;
  --color-ffd : #0fd;
  --color-ffa500: #ffa500;
}

[data-theme="light"] { /* */
/* :root { /**/
  --color-00000040 : #ffffff40;
  --color-superscript-widget : #000;
  --color-339 : #9696d3;

/* main background colors */
  --color-111 : #ccc;
  --color-222 : #ddd;
  --color-333 : #ccc;
  --color-444 : #bbb;
/* main text */
  --color-ddc : #340;
/* emphasised text */  
  --color-f88 : #f33;
/* button fill and box border*/
  --color-555 : #aaa;

/* high-contrast line around boxes */  
  --color-ccc : #111;

/* turnbuckle h3s */
  --color-45a049 : #45a049;
  --color-45f049 : #258029;
/* h1 background */
  --color-231 : #7f5930;

/* chevron background and text and highlight */
  --color-155724 : #3dc35c;
  --color-d4edda : #387346;
  --color-c4ddca : #1f3f0f;
/* 'example' text (code) */
  --color-ffa500: #ae5b13;


  --color-007acc : #007acc; 
  --color-1110 : #1110;
  --color-121212 : #121212;
  --color-1a6 : #1a6;
  --color-1c1 : #1c1;
  --color-1e1e1e : #1e1e1e;
  --color-1e90ff : #1e90ff;
  --color-212121 : #212121;
  --color-228822 : #228822;
  --color-2c2f2f : #2c2f2f;
  --color-2fa32f : #2fa32f;
  --color-358039 : #358039;
  --color-3a3a3a : #3a3a3a;
  --color-764 : #764;
  --color-909090 : #909090;
  --color-a82 : #a82;
  --color-b0b0b0 : #b0b0b0;
  --color-c9f : #c9f;
  --color-e88 : #e88;
  --color-f0f0f0 : #f0f0f0;
  --color-fd2 : #fd2;
  --color-fdd : #fdd;
  --color-ffd : #ffd;
}

body {
    /*padding: 20px;*/
    background-color: #f5f5f5;
    font-family: Arial, sans-serif;

    margin: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    
}

p {
    margin-block-start : 0px;
    margin-block-end : 0px;
}

.code {
  color: var(--color-ffa500);
  font-family: monospace; /* Fixed-width font */
}

.panel {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    max-width: 800px;
    margin: 0 auto;
}

/* Slider container takes full width */
.slider-container {
    flex: 1 0 100%;
    margin-bottom: 10px;
}

/* Styling for the slider */
.slider {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: #ddd;
    outline: none;
    -webkit-appearance: none;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #4CAF50;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #4CAF50;
    cursor: pointer;
}

/* For the left/right slider*/
.toggle-container {
  display: inline-flex;
  background-color: #eee;
  border-radius: 30px;
  padding: 3px;
  position: relative;
  cursor: pointer;
}
.toggle-option {
  padding: 10px 20px;
  z-index: 1;
  text-align: center;
  user-select: none;
}
.toggle-option.active {
  color: #fff;
}
.toggle-slider {
  position: absolute;
  top: 3px;
  left: 3px;
  height: calc(100% - 6px);
  width: calc(50% - 6px);
  background-color: #4a6fa5;
  border-radius: 30px;
  transition: transform 0.3s ease;
}
.toggle-slider.right {
  transform: translateX(100%);
}

.row-container {
    flex: 1 0 100%;
    margin-bottom: 0px;
}


.flex-break {
    flex: 1 0 100%;
    margin: 0px;
}
        .sections {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
        }

        .list-container {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }


.list-container button {
    flex: 1 0 auto;
    min-width: 80px;
    padding: 10px 15px;
    background-color: #90b090;
    color: black;
    border: none;
    text-align: left;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s;
}

    .instructions {
      background-color: #f0f7ff;
      border-left: 4px solid #0066cc;
      padding: 15px;
      margin-bottom: 20px;
      font-size: 0.95em;
    }


    .concept-card {
      flex: 1 0 calc(25% - 15px);
      min-width: 200px;
      border: 1px solid #eee;
      border-radius: 8px;
      padding: 15px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }
    .concept-name {
      font-weight: bold;
      margin-bottom: 10px;
      color: #333;
    }
    .concept-options {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .option {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .option input {
      margin: 0;
    }
    .button-container {
      display: flex;
      justify-content: center;
      margin-top: 20px;
      gap: 10px;
    }
    .results-container {
      margin-top: 30px;
      display: none;
    }
    .results-heading {
      margin-bottom: 15px;
      font-size: 1.2em;
      color: #333;
    }
    .results-json {
      width: 100%;
      height: 150px;
      padding: 10px;
      font-family: monospace;
      border: 1px solid #ddd;
      border-radius: 4px;
      background-color: #f8f8f8;
    }
    .progress-indicator {
      text-align: center;
      margin-bottom: 20px;
      color: #666;
    }
    .stage-indicator {
      font-weight: bold;
      color: #0066cc;
    }
    .diagnostic-container {
      margin-top: 20px;
      padding: 10px;
      background-color: #f8f8f8;
      border: 1px solid #ddd;
      border-radius: 4px;
      font-family: monospace;
      font-size: 12px;
      white-space: pre-wrap;
      max-height: 200px;
      overflow-y: auto;
      display: none;
    }
    .concept-header {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
    }
    .info-icon {
      display: inline-block;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background-color: #0066cc;
      color: white;
      text-align: center;
      font-size: 12px;
      line-height: 14px;
      margin-left: 8px;
      margin-top: -17px;
      cursor: pointer;
      position: relative;
      font-weight: bold;
      flex: 0 0 auto;
      padding: 0px 0px;
      min-width: 0px
    }
    .tooltip {
      position: absolute;
      top: -40px;
      left: 50%;
      transform: translateX(-50%);
      background-color: #333;
      color: white;
      padding: 6px 10px;
      border-radius: 4px;
      font-size: 12px;
      white-space: nowrap;
      visibility: hidden;
      opacity: 0;
      transition: opacity 0.3s;
      z-index: 10;
      font-weight: normal;
      width: max-content;
      max-width: 200px;
    }
    .info-icon:hover {
      background-color: #000077;
    }
    .info-icon:hover .tooltip {
      visibility: visible;
      opacity: 1;
    }
    .tooltip::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      margin-left: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: #333 transparent transparent transparent;
    }


.ascii-art {
    background-color: #f5f5f5;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 20px;
    text-align: left;
    font-family: monospace;
    white-space: pre;
    display: block;
}



.slider-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: -15px;
margin-bottom: -6px;
}

.label-container {
display: flex;
justify-content: center;
flex: 1;
text-align: center;
}

.value-display {
margin-left: 5px;
font-weight: normal;
}

.min-label {
width: 50px;
text-align: left;
font-size: 0.8rem;
color: #666;
}

.max-label {
width: 50px;
text-align: right;
font-size: 0.8rem;
color: #666;
}





/* Dropdown styling */
.dropdown-container {
    flex: 1 0 200px;
}

select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: white;
    font-size: 16px;
}

/* Button row container */
.button-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    flex: 1 0 100%;
    margin-top: 10px;
}

button {
    flex: 1 0 auto;
    min-width: 80px;
    padding: 10px 15px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s;
}

button:hover {
    background-color: #45a049;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .dropdown-container {
        flex: 1 0 100%;
    }
    
    button {
        flex: 1 0 calc(50% - 5px);
    }
}

h1 {
    text-align: center;
    margin-bottom: 20px;
    color: #333;
}

label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #555;
}

.raw {
  white-space: pre-wrap ;
  /*display: block;*/
  /*unicode-bidi: embed;*/
  font-family: monospace;  
  background-color: var(--color-444);
  font-size:  -2;
  padding : 8px;
  border-radius: 3px; 
  border-color: var(--color-ccc);
  border-style: solid;
  border-width: 1px;
  visibility: visible;
}

.raw p {
  margin-top:  -20px;
  margin-bottom:  0px;
}


/* Safari-specific styles */
::-webkit-scrollbar {
  width: 8px;
  background-color: var(--color-333);
}
::-webkit-scrollbar-thumb {
  background-color: var(--color-111);
}

.container {
  display: flex;
  height: calc(100vh - 1em);
  user-select: none;
}
.column {
  flex-basis: 33.33%;
  padding: 10px;
  overflow: auto;
  border: 1px solid var(--color-555);
  transition: flex-basis 0.1s;
  scrollbar-color: var(--color-111) var(--color-444);
  scrollbar-width: thin;  
}

.resizer {
  width: 5px;
  cursor: ew-resize;
  border-left: 1px solid var(--color-444);
  border-right: 1px solid var(--color-444);
}
#col1 {
  background: var(--color-333);
  flex-basis: 90px;
}
#col2 {
  background: var(--color-333);
  min-width:100px;
  flex-basis: 175px;
}
#col3 {
  background: var(--color-333);
  flex-grow: 1;
}

#col2 h3, #col1 h3,{
  color: var(--color-fdd);
}

#col2 h2:hover,#col2 h3:hover,#col2 h4:hover,#col2 h5:hover,#col2 h6:hover,
#col1 h2:hover,#col1 h3:hover,#col1 h4:hover,#col1 h5:hover,#col1 h6:hover
{
  color:var(--color-45f049);
  background: var(--color-444);
}

.canvas-container {
  border: 1px solid #ccc;
  margin-bottom: 20px;
}
.checkbox-row-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
}

.checkbox-option-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.checkbox-option-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
}