@import url("../css/colors.css");

body {
  font-family: var(--font-family);
  background-color: var(--color-app-background);
  color: var(--color-text-primary);
  margin: 0;
  padding: 0;
  line-height: 1.6;
}

.worksheetDts {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  padding: var(--space-xl) var(--space-lg);
}

.container-exercise {
  width: min(100%, 980px);
  margin: 0 auto;
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  position: relative;
  overflow: hidden;
}

.container-exercise + .container-exercise {
  margin-top: var(--space-xl);
}

.exercise-title {
  margin: 0;
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-md);
  background: var(--gradient-primary);
  color: var(--color-text-inverse);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: center;
}

.exercise-title:not(:first-of-type) {
  background: var(--color-surface-muted);
  color: var(--color-text-secondary);
  border: 1px dashed var(--color-border-strong);
}

.container-exercise-instruction {
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  color: var(--color-text-secondary);
  font-size: 0.95rem;
}

.container-exercise-instruction .instruction-content {
  margin: 0;
}

.container-interaction {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  width: 100%;
}

.container-interaction-element {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-interaction-border);
  background: var(--color-interaction-background);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.container-interaction-element .container-label,
.container-label {
  padding: var(--space-xs) var(--space-md);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--color-surface-muted);
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.container-interaction-element-content {
  padding: var(--space-md) var(--space-lg);
  background: var(--color-interaction-background-alt);
  color: var(--color-text-primary);
}

/* --- Programming exercise preview layout --- */
.container-interaction .programming-exercise-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-lg);
}

.container-interaction-element.programming-preview-card {
  gap: 0;
}

.programming-preview-label {
  background: var(--color-surface-muted);
  color: var(--color-text-secondary);
}

.programming-preview-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.programming-preview-canvas {
  background: var(--color-interaction-background);
  border: 1px dashed var(--color-interaction-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.programming-preview-canvas.programming-preview-canvas-tree {
  overflow: auto;
}

.programming-preview-tree {
  width: 100%;
}

.programming-preview-canvas.programming-preview-canvas-svg svg {
  max-width: 100%;
  height: auto;
}

.programming-exercise-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-sm);
}

.programming-exercise-action-button {
  padding: var(--space-sm) var(--space-xl);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-button-border);
  background: var(--color-button-background);
  box-shadow: var(--shadow-button);
  color: var(--color-text-primary);
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  width: min(100%, 980px);
}

.programming-exercise-action-button:hover {
  background: var(--color-button-hover);
  transform: translateY(-1px);
}

/* --- Label Variants --- */
.label-editor,
.container-label.label-editor {
  background: var(--color-label-editor-bg);
  color: var(--color-label-editor-text);
}

.label-scaffolding,
.container-label.label-scaffolding {
  background: var(--color-label-scaffolding-bg);
  color: var(--color-label-scaffolding-text);
}

.label-grading,
.container-label.label-grading {
  background: var(--color-label-grading-unknown-bg);
  color: var(--color-label-grading-unknown-text);
}

.label-grading.grading-unknown,
.label-grading.grading-missing,
.container-label.label-grading.grading-unknown,
.container-label.label-grading.grading-missing {
  background: var(--color-label-grading-unknown-bg);
  color: var(--color-label-grading-unknown-text);
}

.label-grading.grading-error,
.label-grading.grading-incorrect,
.container-label.label-grading.grading-error,
.container-label.label-grading.grading-incorrect,
.container-label.label-grading.grading-wrong {
  background: var(--color-label-grading-error-bg);
  color: var(--color-label-grading-error-text);
}

.label-grading.grading-partially-correct,
.container-label.label-grading.grading-partially-correct {
  background: var(--color-label-grading-partial-bg);
  color: var(--color-label-grading-partial-text);
}

.label-grading.grading-correct,
.container-label.label-grading.grading-correct {
  background: var(--color-label-grading-correct-bg);
  color: var(--color-label-grading-correct-text);
}

/* --- SVG Button Styling --- */
.svg-button {
  width: 52px;
  height: 36px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-button-border);
  background: var(--color-button-background);
  box-shadow: var(--shadow-button);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  cursor: pointer;
  padding: var(--space-xs);
}

.svg-button:hover {
  transform: translateY(-2px);
  background: var(--color-button-hover);
}

.svg-button svg {
  width: 30px;
  height: 30px;
  stroke: var(--color-text-primary);
  stroke-width: 1.8;
}

.svg-button path {
  transition: stroke 0.2s ease, fill 0.2s ease;
}

/* Button colors */
.svg-button.highlighted .button-borderpath,
.svg-button.highlighted .button-fill {
  fill: var(--color-surface-muted);
  stroke: var(--color-theme);
}

.svg-button.highlighted .button-inner {
  stroke: var(--color-theme);
}

.svg-button.highlighted .button-stroke {
  stroke: var(--color-theme);
}

/* scaffolder button colors */
.svg-button .button-show-scaffolder {
  fill: var(--color-surface-muted);
  stroke: var(--color-dark);
}

.svg-button.highlighted .button-show-scaffolder {
  fill: var(--color-surface-muted);
  stroke: var(--color-dark);
}

/* editor button colors */
.svg-button .button-show-editor .button-borderpath {
  fill: var(--color-surface-muted);
  stroke: var(--color-dark);
}

.svg-button.highlighted .button-show-editor .button-borderpath {
  fill: var(--color-dark);
  stroke: var(--color-theme);
}

/* Grading button colors */
.svg-button .button-grading-show .button-borderpath,
.svg-button .button-grading-start .button-borderpath {
  fill: var(--color-surface-muted);
  stroke: var(--color-dark);
}

.svg-button.highlighted .button-grading-show .button-borderpath,
.svg-button.highlighted .button-grading-start .button-borderpath {
  /*fill: url(#gradient-fill-show);*/
  fill: var(--color-surface-muted);
  stroke: var(--color-theme);
}

.svg-button.highlighted .button-grading-start .button-borderpath {
  /*fill: url(#gradient-fill-start);*/
  fill: var(--color-surface-muted);
  stroke: var(--color-theme);
}

/* start scaffolding button colors */
.svg-button .button-start-grading .button-stroke {
  stroke: var(--color-dark);
}

.svg-button.highlighted .button-start-grading .button-stroke {
  stroke: var(--color-dark);
}

/* Interaction arrows */
.container-instruction-arrows {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
}

.container-instruction-arrows .svg-button {
  width: 36px;
  height: 36px;
  box-shadow: none;
}

.container-instruction-arrows .svg-button:hover path,
.container-instruction-arrows .svg-button:hover .button-stroke {
  stroke: var(--color-theme);
}

.workbook-overview-sample {
  max-width: 60vw;
  height: 10vh;
  overflow: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  background: var(--color-surface);
}

/* Turtle environment styles */
.turtle-full-exercise {
  display: grid;
  grid-template-columns: minmax(220px, 0.85fr) minmax(320px, 1.1fr) minmax(260px, 0.9fr);
  gap: var(--space-lg);
  align-items: flex-start;
  width: 100%;
}

@media (max-width: 1100px) {
  .turtle-full-exercise {
    grid-template-columns: repeat(2, minmax(260px, 1fr));
  }
}

@media (max-width: 780px) {
  .turtle-full-exercise {
    grid-template-columns: 1fr;
  }
}

.turtle-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  background: var(--color-interaction-background);
  border: 1px solid var(--color-interaction-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-soft);
  min-height: 0;
}

.turtle-column h3 {
  margin: 0;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
}

.turtle-column.tab-pane {
  min-height: 0;
}

.turtle-column.editor-control {
  gap: var(--space-md);
}

.turtle-column.instruction {
  gap: var(--space-md);
}

.turtle-block-drag-area {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  height: 100%;
}

.turtle-tab-pane {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.turtle-tab-button {
  flex: 1 1 120px;
  padding: 0.45rem 0.85rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-surface-muted);
  color: var(--color-text-secondary);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.turtle-tab-button:hover {
  background: var(--color-surface);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-light);
}

.turtle-tab-button.active {
  background: var(--color-accent-primary);
  color: var(--color-on-accent-primary);
  border-color: transparent;
  box-shadow: var(--shadow-highlight-editor);
}

.turtle-block-list {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-sm);
  border-radius: var(--radius-md);
  background: var(--color-interaction-background-alt);
  border: 1px dashed var(--color-border-subtle);
  overflow-y: auto;
  max-height: 480px;
}

.turtle-palette-block {
  padding: var(--space-xs);
  background: var(--color-interaction-background);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-subtle);
  box-shadow: var(--shadow-light);
  cursor: grab;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.turtle-palette-block:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-button);
}

.turtle-palette-block:active {
  cursor: grabbing;
}

.turtle-palette-block svg {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

.turtle-editor-component {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.turtle-editor-controls {
  display: flex;
  justify-content: flex-end;
}

.turtle-run-button {
  padding: 0.55rem 1.2rem;
  border-radius: var(--radius-sm);
  border: none;
  background: var(--color-accent-success);
  color: var(--color-on-accent-success);
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  box-shadow: var(--shadow-light);
}

/* --- Second iteration block environment --- */
.be-block-environment {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}

.be-block-environment .be-column {
  flex: 1 1 280px;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  background: var(--color-interaction-background);
  border: 1px solid var(--color-interaction-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-soft);
  min-height: 0;
}

.be-block-environment .be-column h3 {
  margin: 0;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
}

.be-block-palette {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.be-palette-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.be-palette-tab-button {
  flex: 1 1 120px;
  padding: 0.45rem 0.85rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-surface-muted);
  color: var(--color-text-secondary);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.be-palette-tab-button.active,
.be-palette-tab-button:hover {
  background: var(--color-accent-primary);
  color: var(--color-on-accent-primary);
  border-color: transparent;
  box-shadow: var(--shadow-highlight-editor);
}

.be-palette-content {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-sm);
  max-height: 420px;
  overflow-y: auto;
  padding: var(--space-sm);
  border-radius: var(--radius-md);
  background: var(--color-interaction-background-alt);
  border: 1px dashed var(--color-border-subtle);
}

.be-palette-entry {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  cursor: grab;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.be-palette-entry:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-light);
}

.be-palette-entry:active {
  cursor: grabbing;
}

.be-palette-entry-preview svg {
  display: block;
  width: 100%;
  height: auto;
}

.be-workspace-surface {
  border: 2px dashed var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  min-height: 320px;
  padding: var(--space-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.be-workspace-surface svg {
  width: 100%;
  height: auto;
}

.be-program-executor {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.be-executor-run {
  align-self: flex-start;
  padding: 0.55rem 1.2rem;
  border-radius: var(--radius-sm);
  border: none;
  background: var(--color-accent-primary);
  color: var(--color-on-accent-primary);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.be-executor-run:hover {
  background: var(--color-accent-primary-strong);
  box-shadow: var(--shadow-button);
}

.be-executor-code {
  background: var(--color-surface-muted);
  border-radius: var(--radius-sm);
  padding: var(--space-sm);
  overflow-x: auto;
}

.be-executor-output {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.turtle-run-button:hover {
  background: #20805a;
  transform: translateY(-1px);
  box-shadow: var(--shadow-button);
}

.turtle-editor-area {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-sm);
  min-height: 260px;
  border: 1px dashed var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-interaction-background-alt);
  overflow-y: auto;
}

.turtle-editor-branch {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.turtle-editor-block {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-sm);
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  background: var(--color-interaction-background);
  border: 1px solid transparent;
  box-shadow: var(--shadow-light);
  cursor: grab;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.turtle-editor-block--has-inside {
  padding-bottom: calc(var(--space-sm) + 0.25rem);
}

.turtle-editor-block:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-soft);
  border-color: var(--color-border-strong);
}

.turtle-editor-block[draggable="false"] {
  cursor: default;
  box-shadow: none;
  border-color: var(--color-border-subtle);
  background: var(--color-interaction-background-alt);
}

.turtle-block-shape {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.turtle-editor-block svg {
  flex-shrink: 0;
  pointer-events: none;
}

.turtle-block-header,
.turtle-reporter-inner {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.turtle-block-params {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  flex-wrap: wrap;
}

.turtle-block-inside {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-left: 1.75rem;
  padding: var(--space-sm);
  padding-left: calc(var(--space-sm) + 0.75rem);
  border-left: 4px solid color-mix(in srgb, var(--color-border-subtle) 70%, transparent);
  border-bottom: 4px solid color-mix(in srgb, var(--color-border-subtle) 70%, transparent);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  background: color-mix(in srgb, var(--color-interaction-background-alt) 75%, white);
}

.turtle-parameter-slot {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
  padding: 0.35rem 0.5rem;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--color-border-subtle);
  background: var(--color-interaction-background-alt);
  min-width: 160px;
}

.turtle-parameter-slot--inline {
  flex-direction: row;
  align-items: center;
  gap: var(--space-xs);
  padding: 0;
  border: none;
  background: transparent;
  min-width: 0;
}

.turtle-parameter-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--color-text-secondary);
}

.turtle-parameter-slot--inline .turtle-parameter-label {
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.turtle-parameter-target {
  --socket-color: rgba(76, 151, 255, 1);
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
  padding: var(--space-xs);
  min-height: 52px;
  border-radius: var(--radius-sm);
  border: 2px dashed rgba(0, 0, 0, 0.08);
  border: 2px dashed color-mix(in srgb, var(--socket-color) 40%, transparent);
  background: rgba(0, 0, 0, 0.03);
  background: color-mix(in srgb, var(--socket-color) 10%, white);
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.turtle-parameter-slot--inline .turtle-parameter-target {
  flex-direction: row;
  align-items: center;
  min-height: auto;
  padding: 0.2rem 0.45rem;
}

.turtle-parameter-target.active {
  border-color: var(--socket-color);
  background: color-mix(in srgb, var(--socket-color) 18%, white);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--socket-color) 25%, transparent);
}

.turtle-parameter-slot--inline .turtle-parameter-placeholder {
  padding: 0;
}

.turtle-parameter-placeholder {
  font-size: 0.75rem;
  font-style: italic;
  color: var(--color-text-secondary);
  opacity: 0.8;
  padding: var(--space-xxs) var(--space-xs);
}

.turtle-reporter-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
}

.turtle-reporter-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: var(--color-surface);
  box-shadow: var(--shadow-light);
  cursor: grab;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.turtle-reporter-block:hover {
  transform: translateY(-1px);
  border-color: var(--color-border-subtle);
  box-shadow: var(--shadow-soft);
}

.turtle-reporter-inner svg {
  pointer-events: none;
}

.turtle-reporter-input {
  width: 100%;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  padding: 0.25rem 0.4rem;
  font: inherit;
  font-weight: 600;
  color: var(--color-text-primary);
  background: var(--color-interaction-background-alt);
}

.turtle-reporter-input:focus {
  outline: none;
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 2px rgba(76, 151, 255, 0.18);
}

.turtle-reporter-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxs);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  cursor: pointer;
}

.turtle-reporter-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.turtle-reporter-toggle-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.turtle-drop-zone {
  height: 12px;
  margin: 3px 0;
  border-radius: 999px;
  border: 2px dashed var(--color-border-subtle);
  background: rgba(48, 102, 229, 0.06);
  opacity: 0.45;
  transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

.turtle-drop-zone--inside {
  margin-left: 2.25rem;
}

.turtle-drop-zone.active {
  opacity: 1;
  border-color: var(--color-accent-primary);
  background: rgba(48, 102, 229, 0.18);
  transform: scaleY(1.25);
  box-shadow: var(--shadow-focus);
}

.turtle-preview-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-interaction-background-alt);
  min-height: 260px;
}

.turtle-preview {
  width: 100%;
  max-height: 320px;
  overflow: auto;
  padding: var(--space-sm);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
  display: flex;
  justify-content: center;
  align-items: center;
}

.turtle-preview svg {
  width: 100%;
  height: auto;
  display: block;
}

.turtle-preview.placeholder {
  color: var(--color-text-secondary);
  font-style: italic;
  text-align: center;
}

.turtle-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.turtle-action-button {
  flex: 1 1 180px;
  padding: 0.65rem 1.1rem;
  border-radius: var(--radius-sm);
  border: none;
  background: var(--color-accent-primary);
  color: var(--color-on-accent-primary);
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-light);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.turtle-action-button:hover {
  background: var(--color-focus);
  transform: translateY(-1px);
  box-shadow: var(--shadow-button);
}

.turtle-scaffolding-state pre {
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-interaction-background);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
  font-family: 'Fira Code', 'Source Code Pro', monospace;
  font-size: 0.9rem;
  overflow-x: auto;
  white-space: pre-wrap;
}

.turtle-target-preview {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  align-items: center;
  padding: var(--space-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-interaction-background);
  box-shadow: var(--shadow-light);
}

.turtle-target-description {
  margin: 0;
  color: var(--color-text-secondary);
  text-align: center;
}

.turtle-target-image svg {
  display: block;
  max-width: 100%;
  height: auto;
}

.turtle-scaffolding-result {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.turtle-scaffolding-result-message {
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-interaction-background);
  font-weight: 600;
}

.turtle-scaffolding-result-message.ok {
  background: rgba(47, 155, 116, 0.15);
  border-color: rgba(47, 155, 116, 0.35);
  color: var(--color-accent-success);
}

.turtle-scaffolding-result-message.diff {
  background: rgba(245, 197, 66, 0.18);
  border-color: rgba(245, 197, 66, 0.4);
  color: var(--color-text-primary);
}

.turtle-scaffolding-result-message.empty {
  font-weight: 500;
  font-style: italic;
  color: var(--color-text-secondary);
  background: var(--color-interaction-background-alt);
  border-style: dashed;
}

.turtle-grading-result {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.turtle-grading-result h3 {
  margin: 0;
  font-size: 1rem;
  color: var(--color-text-primary);
}

.turtle-grading-svg {
  padding: var(--space-sm);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-interaction-background);
  box-shadow: var(--shadow-light);
  display: flex;
  justify-content: center;
}

.turtle-grading-svg svg {
  display: block;
  max-width: 100%;
  height: auto;
}

.turtle-grading-summary {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  background: var(--color-interaction-background-alt);
  font-size: 0.95rem;
}

.turtle-grading-summary p {
  margin: 0;
}

.turtle-grading-placeholder {
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  border: 1px dashed var(--color-border-subtle);
  background: var(--color-interaction-background-alt);
  color: var(--color-text-secondary);
  font-style: italic;
  text-align: center;
}

/* --- Highlight States --- */
.container-exercise .container-interaction.highlight-editor .container-interaction-element,
.container-exercise .container-interaction.highlight-editor .svg-button {
  border-color: var(--color-label-editor-bg);
  box-shadow: var(--shadow-highlight-editor);
}

.container-exercise .container-interaction.highlight-editor .label-editor,
.container-exercise .container-interaction.highlight-editor .container-label.label-editor {
  background: var(--color-label-editor-bg);
  color: var(--color-label-editor-text);
}

.container-exercise .container-interaction.highlight-scaffolding .container-interaction-element,
.container-exercise .container-interaction.highlight-scaffolding .svg-button {
  border-color: var(--color-label-scaffolding-bg);
  box-shadow: var(--shadow-highlight-scaffolding);
}

.container-exercise .container-interaction.highlight-scaffolding .label-scaffolding,
.container-exercise .container-interaction.highlight-scaffolding .container-label.label-scaffolding {
  background: var(--color-label-scaffolding-bg);
  color: var(--color-label-scaffolding-text);
}

.container-exercise .container-interaction.highlight-grading .container-interaction-element,
.container-exercise .container-interaction.highlight-grading .svg-button {
  border-color: var(--color-label-grading-correct-bg);
  box-shadow: var(--shadow-highlight-grading);
}

.container-exercise .container-interaction.highlight-grading .label-grading,
.container-exercise .container-interaction.highlight-grading .container-label.label-grading {
  background: var(--color-label-grading-correct-bg);
  color: var(--color-label-grading-correct-text);
}

/* --- Layout toggles remain accessible for ScalaJS logic --- */
.container-exercise .container-interaction.layout-scaffolding .interaction-scaffolding,
.container-exercise .container-interaction.layout-scaffolding .button-editor {
  visibility: visible;
}

.container-exercise .container-interaction.layout-scaffolding .button-scaffolding,
.container-exercise .container-interaction.layout-scaffolding .interaction-editor,
.container-exercise .container-interaction.layout-scaffolding .container-instruction-arrows,
.container-exercise .container-interaction.layout-scaffolding .button-grading,
.container-exercise .container-interaction.layout-scaffolding .interaction-grading {
  display: none;
}

.container-exercise .container-interaction.layout-editor .button-scaffolding,
.container-exercise .container-interaction.layout-editor .interaction-editor,
.container-exercise .container-interaction.layout-editor .button-grading {
  visibility: visible;
}

.container-exercise .container-interaction.layout-editor .interaction-scaffolding,
.container-exercise .container-interaction.layout-editor .interaction-grading,
.container-exercise .container-interaction.layout-editor .button-editor,
.container-exercise .container-interaction.layout-editor .container-instruction-arrows {
  display: none;
}

.container-exercise .container-interaction.layout-grading .button-editor,
.container-exercise .container-interaction.layout-grading .interaction-editor,
.container-exercise .container-interaction.layout-grading .container-instruction-arrows,
.container-exercise .container-interaction.layout-grading .interaction-grading {
  visibility: visible;
}

.container-exercise .container-interaction.layout-grading .button-scaffolding,
.container-exercise .container-interaction.layout-grading .interaction-scaffolding,
.container-exercise .container-interaction.layout-grading .button-grading {
  display: none;
}

/* --- Editors --- */
.simple-text-editor textarea {
  width: 100%;
  border: 3px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-primary);
  padding: var(--space-md);
  font-family: 'JetBrains Mono', 'Fira Code', 'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  font-size: 0.95rem;
  resize: vertical;
  min-height: 160px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  box-sizing: border-box;
}

.simple-text-editor textarea:focus {
  outline: none;
  border-color: var(--color-focus);
  box-shadow: var(--shadow-focus);
  background: var(--color-interaction-background);
}

.simple-text-editor textarea[disabled] {
  background: var(--color-interaction-background-alt);
  color: var(--color-text-secondary);
  cursor: not-allowed;
  opacity: 0.85;
}

.simple-selector-editor {
  width: 100%;
}

.simple-selector-editor__select {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
  color: var(--color-text-primary);
  padding: calc(var(--space-sm) + 2px) var(--space-md);
  font-size: 0.95rem;
  line-height: 1.4;
  appearance: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  cursor: pointer;
}

.simple-selector-editor__select:focus {
  outline: none;
  border-color: var(--color-focus);
  box-shadow: var(--shadow-focus);
  background: var(--color-interaction-background);
}

.simple-selector-editor__select[disabled] {
  background: var(--color-interaction-background-alt);
  color: var(--color-text-secondary);
  cursor: not-allowed;
  opacity: 0.85;
}

.simple-boolean-editor {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface-muted);
  color: var(--color-text-primary);
  font-size: 0.95rem;
  font-weight: 600;
  width: fit-content;
  user-select: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.simple-boolean-editor:hover {
  border-color: var(--color-border-strong);
  background: var(--color-interaction-background);
  box-shadow: var(--shadow-soft);
}

.simple-boolean-editor__body {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  cursor: pointer;
}

.simple-boolean-editor__checkbox {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: var(--radius-sm);
  border: 2px solid var(--color-border);
  background: var(--color-surface);
  appearance: none;
  display: grid;
  place-items: center;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.simple-boolean-editor__checkbox::after {
  content: '';
  width: 0.35rem;
  height: 0.7rem;
  border: 2px solid var(--color-text-inverse);
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.simple-boolean-editor__checkbox:focus-visible {
  outline: none;
  border-color: var(--color-focus);
  box-shadow: var(--shadow-focus);
}

.simple-boolean-editor__checkbox:checked {
  background: var(--color-accent-primary);
  border-color: var(--color-accent-primary);
}

.simple-boolean-editor__checkbox:checked::after {
  opacity: 1;
}

.simple-boolean-editor__label-text {
  color: var(--color-text-primary);
  letter-spacing: 0.01em;
}

/* --- Misc. utility containers --- */
.container-interaction-element + .container-interaction-element {
  margin-top: 0;
}

.container-interaction-element .meta-information {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
}

@media (max-width: 768px) {
  .worksheetDts {
    padding: var(--space-lg) var(--space-sm);
  }

  .container-exercise {
    padding: var(--space-lg);
  }

  .container-exercise.style-compact .container-interaction {
    grid-template-columns: 1fr !important;
  }

  .svg-button {
    width: 38px;
    height: 38px;
  }
}