/* The lesson ladder. One column of rows rather than the endgame grid: the order matters
   here — each lesson assumes the one above it — so a grid would misrepresent it. */
.tutorial-ladder {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  gap: 8px;
}

.tutorial-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
.tutorial-row:hover { border-color: var(--accent); }

.tutorial-num {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--paper3);
  color: var(--ink3);
  font-size: 0.85rem;
  font-weight: 600;
}
.tutorial-row.done .tutorial-num { background: var(--success-soft); color: var(--success); }
.tutorial-title { flex: 1 1 auto; font-weight: 600; }
.tutorial-check { color: var(--success); font-weight: 700; }

/* The graduation row is the ladder's payoff, so it reads as the destination rather than a
   twelfth lesson. */
.tutorial-row.graduation {
  border-color: var(--accent-soft);
  background: var(--accent-tint);
}

/* ---- The first-launch fork -------------------------------------------------------- */
/* A full-screen host over the page, not a dialog: it is the first thing a brand-new
   visitor sees, and there is nothing behind it worth looking at yet. */
.onboarding {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--paper);
}
.onboarding-card { max-width: 420px; width: 100%; text-align: center; }
.onboarding-q {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 6px;
}
.onboarding-sub { color: var(--ink3); margin: 0 0 20px; }
.onboarding-choices { display: grid; gap: 10px; }
.onboarding-skip {
  margin-top: 16px;
  background: none;
  border: 0;
  color: var(--ink4);
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
}