/* ── Tutorial index / overview pages ── */

.tutorial-parts-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.tutorial-overview {
  align-items: start;
}

.tutorial-overview-steps .project-section {
  margin-bottom: 0;
}

.project-link-plain {
  cursor: default;
}

.project-link-plain:hover {
  color: var(--muted);
  border-color: var(--border);
}

/* ── Interactive step editor ── */

.tutorial-editor {
  display: grid;
  grid-template-columns: 7fr 3fr;
  gap: 1.25rem;
  margin: 1.5rem 0;
}

@media (max-width: 820px) {
  .tutorial-editor {
    grid-template-columns: 1fr;
  }
}

.tutorial-editor-pane,
.tutorial-console-pane {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 0;
}

.tutorial-editor-toolbar,
.tutorial-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.tutorial-toolbar .serial-status {
  /* Override .serial-status's margin-left: auto (tools.css) — in the wider
     Serial Monitor toolbar that pushes it to the far right on one line, but
     here the panel is narrow enough that it usually wraps onto its own
     line, where auto-margin would still shove it to the right edge. Left-
     aligned reads better whether it's sharing the row or on its own. */
  margin-left: 0;
}

.tutorial-editor-label {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.85rem;
  color: var(--muted);
  font-weight: 700;
  margin-right: auto;
}

.tutorial-cm-mount {
  border: 1.5px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  height: 340px;
  min-width: 0;
}

.tutorial-cm-mount .cm-editor {
  height: 100%;
  background: var(--bg-card);
  color: var(--text);
}

.tutorial-cm-mount .cm-gutters {
  background: var(--bg-card);
  color: var(--muted);
  border-right: 1px solid var(--border);
}

.tutorial-cm-mount .cm-activeLine {
  background: color-mix(in srgb, var(--orange) 8%, transparent);
}

.tutorial-cm-mount .cm-activeLineGutter {
  background: color-mix(in srgb, var(--orange) 14%, transparent);
}

.tutorial-starter-code {
  width: 100%;
  height: 340px;
  background: var(--bg-card);
  color: var(--text);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 1rem;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.9rem;
  resize: vertical;
}

.tutorial-console {
  height: 340px;
}

.tutorial-connect-btn,
.tutorial-run-btn {
  width: auto;
  border: none;
  cursor: pointer;
  font-family: inherit;
  padding: 0.5rem 0.8rem;
  font-size: 0.8rem;
}

.tutorial-connect-btn.connected {
  background: #e0453d;
  box-shadow: 0 2px 8px rgba(224, 69, 61, 0.3);
}

.tutorial-run-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}