/*
 * Shared CSS for array stepper visualizations
 * Used by stepper-array-intro through stepper-to-perspektiver
 */

/* Array container – horizontal row of cells */
.arr-container {
  display: flex; align-items: stretch;
  border: 1px solid var(--accent-border);
  border-radius: 6px; overflow: hidden;
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.arr-container.visible { opacity: 1; transform: translateY(0); }

/* Individual slot */
.arr-slot {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  min-width: 0; flex: 0 0 0px;
  padding: 0; border-right: none;
  background: transparent;
  transition: background 0.3s ease, border-color 0.3s ease, opacity 0.4s ease, transform 0.4s ease,
              flex-basis 0.4s ease, min-width 0.4s ease, padding 0.4s ease;
  opacity: 0; overflow: hidden;
}
.arr-slot.visible {
  opacity: 1; min-width: 64px; flex: 1;
  padding: 8px 6px;
  border-right: 1px solid var(--border);
}
/* Remove right border from last visible slot */
.arr-slot:last-child, .arr-slot.last-visible { border-right: none; }

/* Slot states */
.arr-slot.highlight { background: var(--accent-bg); }
.arr-slot.testing { background: rgba(255,145,0,0.1); border-color: rgba(255,145,0,0.3); }
.arr-slot.pass { background: rgba(77,182,172,0.15); }
.arr-slot.fail { background: rgba(220,60,60,0.08); opacity: 0.4; }
.arr-slot.dimmed { opacity: 0.35; }

/* Index label – small dim text above value */
.arr-index {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; font-weight: 400;
  color: var(--text-dimmest);
  margin-bottom: 4px; line-height: 1;
}

/* Value text */
.arr-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px; font-weight: 500;
  color: var(--accent-node-text);
  line-height: 1;
}

/* .length badge */
.length-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 400;
  color: var(--text-dim);
  margin-top: 8px; padding: 3px 10px;
  border-radius: 10px;
  background: var(--node-bg);
  border: 1px solid var(--node-border);
  opacity: 0; transition: opacity 0.4s ease, background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.length-badge.visible { opacity: 1; }
.length-badge.highlight {
  background: var(--accent-bg);
  border-color: var(--accent-border);
  color: var(--accent);
}

/* Console output area */
.console-output {
  display: flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; margin-top: 16px;
  opacity: 0; transition: opacity 0.4s ease;
}
.console-output.visible { opacity: 1; }
.console-prefix {
  color: var(--text-dimmest); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.console-value { color: var(--accent); font-weight: 500; }

/* Array variable label – purple pill above container */
.arr-label {
  display: flex; flex-direction: column; align-items: center;
  margin-bottom: 4px;
  opacity: 0; transition: opacity 0.4s ease;
}
.arr-label.visible { opacity: 1; }
.arr-label .var-pill {
  border-radius: 10px;
  background: var(--var-pill-bg);
  border: 1px solid var(--var-pill-border);
  padding: 3px 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 500;
  color: var(--var-pill-text);
}
.arr-label .var-connector {
  width: 1px; height: 12px;
  background: var(--var-line);
}

/* Zoom controls – always visible, horizontal, above subtitle bar */
.zoom-controls { display: flex; flex-direction: row; bottom: 95px; }
:fullscreen .zoom-controls, .is-fullscreen .zoom-controls { bottom: 180px; }

/* Fullscreen scaling */
:fullscreen .arr-index, .is-fullscreen .arr-index { font-size: 11px; }
:fullscreen .arr-value, .is-fullscreen .arr-value { font-size: 18px; }
:fullscreen .arr-slot.visible, .is-fullscreen .arr-slot.visible { min-width: 68px; padding: 12px 0; }
:fullscreen .arr-label .var-pill, .is-fullscreen .arr-label .var-pill { font-size: 14px; padding: 4px 16px; }
:fullscreen .length-badge, .is-fullscreen .length-badge { font-size: 13px; }
:fullscreen .console-output, .is-fullscreen .console-output { font-size: 15px; }